@utilitywarehouse/hearth-react-native 0.28.3 → 0.28.5

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.28.3 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.28.5 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.28.3 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.28.5 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -56,13 +56,13 @@
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1554.353 |    59.2%
-react-hooks/exhaustive-deps               |   144.027 |     5.5%
-no-global-assign                          |   113.457 |     4.3%
-react-hooks/rules-of-hooks                |    91.927 |     3.5%
-@typescript-eslint/ban-ts-comment         |    60.650 |     2.3%
-no-fallthrough                            |    48.638 |     1.9%
-no-unexpected-multiline                   |    47.691 |     1.8%
-no-misleading-character-class             |    45.726 |     1.7%
-@typescript-eslint/no-unused-expressions  |    29.696 |     1.1%
-@typescript-eslint/triple-slash-reference |    29.272 |     1.1%
+@typescript-eslint/no-unused-vars         |  1665.555 |    62.9%
+react-hooks/exhaustive-deps               |   114.741 |     4.3%
+no-misleading-character-class             |    86.661 |     3.3%
+no-global-assign                          |    82.213 |     3.1%
+react-hooks/rules-of-hooks                |    71.322 |     2.7%
+no-unexpected-multiline                   |    47.421 |     1.8%
+@typescript-eslint/ban-ts-comment         |    37.884 |     1.4%
+@typescript-eslint/triple-slash-reference |    36.368 |     1.4%
+no-loss-of-precision                      |    33.743 |     1.3%
+no-regex-spaces                           |    23.584 |     0.9%

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.28.5
+
+### Patch Changes
+
+- [#1045](https://github.com/utilitywarehouse/hearth/pull/1045) [`3778061`](https://github.com/utilitywarehouse/hearth/commit/37780613890221368edb74c0ce83b8bf3d03e5b3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `BannerIllustration` now stays centered in vertical banners and no longer inherits image border styling or horizontal stretching.
+
+## 0.28.4
+
+### Patch Changes
+
+- [#1034](https://github.com/utilitywarehouse/hearth/pull/1034) [`76598eb`](https://github.com/utilitywarehouse/hearth/commit/76598eb0374c79f9e6c2c23c421f2b9602fbb113) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `CheckboxTile` spacing now uses the tile gap token instead of the base checkbox gap token.
+
+- [#1034](https://github.com/utilitywarehouse/hearth/pull/1034) [`76598eb`](https://github.com/utilitywarehouse/hearth/commit/76598eb0374c79f9e6c2c23c421f2b9602fbb113) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `Combobox` trigger outline so it is only shown when the control is focused.
+
+- [#1034](https://github.com/utilitywarehouse/hearth/pull/1034) [`76598eb`](https://github.com/utilitywarehouse/hearth/commit/76598eb0374c79f9e6c2c23c421f2b9602fbb113) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `RadioTile` spacing now uses the tile gap token instead of the base radio gap token.
+
+- [#1036](https://github.com/utilitywarehouse/hearth/pull/1036) [`b7636e6`](https://github.com/utilitywarehouse/hearth/commit/b7636e6185879264e8d929c3be44fd0d1a354c22) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `CurrencyInput` font size.
+
+- [#1039](https://github.com/utilitywarehouse/hearth/pull/1039) [`3a895bc`](https://github.com/utilitywarehouse/hearth/commit/3a895bcb8dcceb7d55a454ec63de9256d2d8322f) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Align all `Radio` and `Checkbox` default and tile gap sizes.
+
+- [#1035](https://github.com/utilitywarehouse/hearth/pull/1035) [`01633a7`](https://github.com/utilitywarehouse/hearth/commit/01633a73153563d9b2286f42b764ad771e48ff82) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `Pill` component no longer applies extra vertical padding and fixes vertical alignment.
+
 ## 0.28.3
 
 ### Patch Changes

package/build/components/Banner/Banner.js

@@ -130,7 +130,9 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             direction: {
                 horizontal: {
-                    flex: 1,
+                    _web: {
+                        flex: 1,
+                    },
                 },
                 vertical: {},
             },

package/build/components/Banner/BannerIllustration.js

@@ -12,14 +12,14 @@ const BannerIllustration = (props) => {
     }
     return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...props, style: [styles.image, props.style] }) }));
 };
-const styles = StyleSheet.create(theme => ({
+const styles = StyleSheet.create({
     media: {
         flexShrink: 0,
         variants: {
             direction: {
                 horizontal: {},
                 vertical: {
-                    alignSelf: 'flex-start',
+                    alignSelf: 'center',
                 },
             },
         },
@@ -29,16 +29,11 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             direction: {
                 horizontal: {},
-                vertical: {
-                    width: '100%',
-                },
+                vertical: {},
             },
         },
     },
     image: {
-        borderRadius: theme.borderRadius.md,
-        borderColor: theme.color.border.strong,
-        borderWidth: theme.borderWidth[1],
         variants: {
             direction: {
                 horizontal: { width: 160, height: 95 },
@@ -49,5 +44,5 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
-}));
+});
 export default BannerIllustration;

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create(theme => ({
         flexDirection: 'row',
         justifyContent: 'flex-start',
         alignSelf: 'stretch',
-        gap: theme.components.checkbox.gap,
+        gap: theme.components.checkbox.tile.gap,
         padding: theme.components.checkbox.tile.padding,
         borderWidth: theme.components.checkbox.tile.borderWidth,
         borderColor: theme.color.border.strong,

package/build/components/CurrencyInput/CurrencyInput.js

@@ -17,7 +17,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
         }
     };
     const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
-    return (_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, required: required, style: styles.wrap, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+    return (_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, required: required, style: styles.wrap, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "3xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';
 const styles = StyleSheet.create(theme => ({
@@ -26,13 +26,13 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.input.currency.gap,
     },
     text: {
-        ...(Platform.OS === 'ios' && { lineHeight: 46 }),
+        ...(Platform.OS === 'ios' && { lineHeight: 40 }),
         _web: {
             marginTop: 1,
         },
     },
     input: {
-        fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
+        fontSize: theme.typography.mobile.detailText['3xl'].fontSize,
         fontFamily: theme.typography.mobile.detailText.fontFamily,
         fontWeight: `${theme.typography.mobile.detailText.fontWeight}`,
         paddingTop: 0,

package/build/components/PillGroup/Pill.js

@@ -26,7 +26,6 @@ const styles = StyleSheet.create(theme => ({
         minWidth: theme.components.pill.minWidth,
         gap: theme.components.pill.gap,
         paddingHorizontal: theme.components.pill.paddingHorizontal,
-        paddingVertical: theme.components.pill.paddingVertical,
         borderRadius: theme.components.pill.borderRadius,
         borderWidth: theme.components.pill.borderWidth,
         borderColor: theme.color.interactive.neutral.border.subtle,

package/build/components/Radio/RadioTileRoot.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create(theme => ({
         flexDirection: 'row',
         justifyContent: 'flex-start',
         alignSelf: 'stretch',
-        gap: theme.components.radio.gap,
+        gap: theme.components.radio.tile.gap,
         padding: theme.components.radio.tile.padding,
         borderWidth: theme.components.radio.tile.borderWidth,
         borderColor: theme.color.border.strong,

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

@@ -10,7 +10,7 @@ declare const _default: {
             readonly color: "#fcfbf2";
         };
     };
-    readonly gap: 12;
+    readonly gap: 8;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
@@ -24,7 +24,7 @@ declare const _default: {
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
-        readonly gap: 12;
+        readonly gap: 8;
         readonly group: {
             readonly gap: 6;
             readonly heading: {

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

@@ -10,7 +10,7 @@ export default {
             color: '#fcfbf2',
         },
     },
-    gap: 12,
+    gap: 8,
     group: {
         gap: 16,
         stack: {
@@ -24,7 +24,7 @@ export default {
         borderRadius: 8,
         borderWidth: 1,
         borderWidthSelected: 2,
-        gap: 12,
+        gap: 8,
         group: {
             gap: 6,
             heading: {

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

@@ -7,7 +7,7 @@ declare const _default: {
     readonly checked: {
         readonly color: "#101010";
     };
-    readonly gap: 12;
+    readonly gap: 8;
     readonly group: {
         readonly gap: 16;
         readonly stack: {

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

@@ -7,7 +7,7 @@ export default {
     checked: {
         color: '#101010',
     },
-    gap: 12,
+    gap: 8,
     group: {
         gap: 16,
         stack: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.28.3",
+  "version": "0.28.5",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",

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

@@ -96,11 +96,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   render: (args: any) => {
-    return (
-      <View style={{ width: 400 }}>
-        <Banner {...args} icon={ElectricityMediumIcon} />
-      </View>
-    );
+    return <Banner {...args} icon={ElectricityMediumIcon} />;
   },
 };
 
@@ -138,7 +134,7 @@ export const WithIcon: Story = {
 export const WithIllustration: Story = {
   render: () => {
     return (
-      <View style={{ width: 400 }}>
+      <View>
         <Flex spacing="lg" direction="column">
           <Banner
             illustration={

package/src/components/Banner/Banner.tsx

@@ -238,7 +238,9 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       direction: {
         horizontal: {
-          flex: 1,
+          _web: {
+            flex: 1,
+          },
         },
         vertical: {},
       },

package/src/components/Banner/BannerIllustration.tsx

@@ -21,14 +21,14 @@ const BannerIllustration = (props: ImageProps | ThemedImageProps) => {
   );
 };
 
-const styles = StyleSheet.create(theme => ({
+const styles = StyleSheet.create({
   media: {
     flexShrink: 0,
     variants: {
       direction: {
         horizontal: {},
         vertical: {
-          alignSelf: 'flex-start',
+          alignSelf: 'center',
         },
       },
     },
@@ -38,16 +38,11 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       direction: {
         horizontal: {},
-        vertical: {
-          width: '100%',
-        },
+        vertical: {},
       },
     },
   },
   image: {
-    borderRadius: theme.borderRadius.md,
-    borderColor: theme.color.border.strong,
-    borderWidth: theme.borderWidth[1],
     variants: {
       direction: {
         horizontal: { width: 160, height: 95 },
@@ -58,6 +53,6 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
-}));
+});
 
 export default BannerIllustration;

package/src/components/Checkbox/CheckboxTileRoot.tsx

@@ -18,7 +18,7 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignSelf: 'stretch',
-    gap: theme.components.checkbox.gap,
+    gap: theme.components.checkbox.tile.gap,
     padding: theme.components.checkbox.tile.padding,
     borderWidth: theme.components.checkbox.tile.borderWidth,
     borderColor: theme.color.border.strong,

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -56,7 +56,7 @@ const CurrencyInput = ({
       invalidText={invalidText}
     >
       <InputSlot>
-        <DetailText size="4xl" style={styles.text} accessible={false}>
+        <DetailText size="3xl" style={styles.text} accessible={false}>
           £
         </DetailText>
       </InputSlot>
@@ -83,13 +83,13 @@ const styles = StyleSheet.create(theme => ({
     gap: theme.components.input.currency.gap,
   },
   text: {
-    ...(Platform.OS === 'ios' && { lineHeight: 46 }),
+    ...(Platform.OS === 'ios' && { lineHeight: 40 }),
     _web: {
       marginTop: 1,
     },
   },
   input: {
-    fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
+    fontSize: theme.typography.mobile.detailText['3xl'].fontSize,
     fontFamily: theme.typography.mobile.detailText.fontFamily,
     fontWeight: `${theme.typography.mobile.detailText.fontWeight}`,
     paddingTop: 0,

package/src/components/Icon/Icon.docs.mdx

@@ -34,7 +34,9 @@ Icons are often used to enhance the usability and accessibility of digital produ
 You can either use the React Native components directy from our `@utilitywarehouse/hearth-react-native-icons` package or use the `Icon`
 component from our `@utilitywarehouse/hearth-react-native` package to render the icons with utility props such as `color`.
 
-The following example shows how to use the icons directly from the `@utilitywarehouse/hearth-react-native-icons` package.
+We reccomend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
+The `Icon` component also provides additional functionality such as handling different color modes and sizes as well as automatically applying
+light and dark mode colors from the theme.
 
 <UsageWrap>
   <Center>
@@ -60,16 +62,16 @@ const MyComponent = () => {
   const { color } = useTheme();
   return (
     <Flex spacing="lg" direction="row" alignItems="center">
-      <ElectricityMediumIcon color={color.energyBlue['700']} />
-      <MobileMediumIcon color={color.mobileRose['700']} />
-      <BroadbandMediumIcon color={color.broadbandGreen['700']} />
-      <InsuranceMediumIcon color={color.insuranceOrange['700']} />
+      <Icon as={ElectricityMediumIcon} color={color.energyBlue['700']} />
+      <Icon as={MobileMediumIcon} color={color.mobileRose['700']} />
+      <Icon as={BroadbandMediumIcon} color={color.broadbandGreen['700']} />
+      <Icon as={InsuranceMediumIcon} color={color.insuranceOrange['700']} />
     </Flex>
   );
 };
 ```
 
-Or you can use the `Icon` component to render the icons.
+Or you can use the icons directly from the `@utilitywarehouse/hearth-react-native-icons` package. Make sure you handle the color prop correctly, including light and dark modes.
 
 ```jsx
 import { Flex, Icon, color } from '@utilitywarehouse/hearth-react-native';
@@ -81,12 +83,13 @@ import {
 } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => {
+  const { color } = useTheme();
   return (
     <Flex spacing="lg" direction="row" alignItems="center">
-      <Icon as={ElectricityMediumIcon} color="energyBlue700" />
-      <Icon as={MobileMediumIcon} color="mobileRose700" />
-      <Icon as={BroadbandMediumIcon} color="broadbandGreen700" />
-      <Icon as={InsuranceMediumIcon} color="insuranceOrange700" />
+      <ElectricityMediumIcon color={color.energyBlue['700']} />
+      <MobileMediumIcon color={color.mobileRose['700']} />
+      <BroadbandMediumIcon color={color.broadbandGreen['700']} />
+      <InsuranceMediumIcon color={color.insuranceOrange['700']} />
     </Flex>
   );
 };

package/src/components/PillGroup/Pill.tsx

@@ -52,7 +52,6 @@ const styles = StyleSheet.create(theme => ({
     minWidth: theme.components.pill.minWidth,
     gap: theme.components.pill.gap,
     paddingHorizontal: theme.components.pill.paddingHorizontal,
-    paddingVertical: theme.components.pill.paddingVertical,
     borderRadius: theme.components.pill.borderRadius,
     borderWidth: theme.components.pill.borderWidth,
     borderColor: theme.color.interactive.neutral.border.subtle,

package/src/components/Radio/RadioRoot.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { Pressable, ViewStyle } from 'react-native';
-import type RadioProps from './Radio.props';
 import { RadioContext } from './Radio.context';
+import type RadioProps from './Radio.props';
 import { useRadioGroupContext } from './RadioGroup.context';
 
 const RadioRoot = ({

package/src/components/Radio/RadioTileRoot.tsx

@@ -18,7 +18,7 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignSelf: 'stretch',
-    gap: theme.components.radio.gap,
+    gap: theme.components.radio.tile.gap,
     padding: theme.components.radio.tile.padding,
     borderWidth: theme.components.radio.tile.borderWidth,
     borderColor: theme.color.border.strong,

package/src/tokens/components/light/checkbox.ts

@@ -11,7 +11,7 @@ export default {
       color: '#fcfbf2',
     },
   },
-  gap: 12,
+  gap: 8,
   group: {
     gap: 16,
     stack: {
@@ -25,7 +25,7 @@ export default {
     borderRadius: 8,
     borderWidth: 1,
     borderWidthSelected: 2,
-    gap: 12,
+    gap: 8,
     group: {
       gap: 6,
       heading: {

package/src/tokens/components/light/radio.ts

@@ -8,7 +8,7 @@ export default {
   checked: {
     color: '#101010',
   },
-  gap: 12,
+  gap: 8,
   group: {
     gap: 16,
     stack: {