@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,6 +1,8 @@
 
-> @utilitywarehouse/hearth-react-native@0.2.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.3.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative
 :----|----------:|--------:
+Rule | Time (ms) | Relative
+:----|----------:|--------:

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.3.1
+
+### Patch Changes
+
+- [#472](https://github.com/utilitywarehouse/hearth/pull/472) [`009fe4b`](https://github.com/utilitywarehouse/hearth/commit/009fe4bff4fc54e424f22629040f715d3d4714ea) Thanks [@jordmccord](https://github.com/jordmccord)! - Add `image` prop to `Checkbox` and `Radio` components
+
+- [#500](https://github.com/utilitywarehouse/hearth/pull/500) [`cc49e74`](https://github.com/utilitywarehouse/hearth/commit/cc49e74e3736b9647e8c5576ce45020add258625) Thanks [@jordmccord](https://github.com/jordmccord)! - - Updated dependencies [[`8dac8c1`](https://github.com/utilitywarehouse/hearth/commit/8dac8c1def9083d8e4efa1385e0ee7be23428c46)]:
+
+  - @utilitywarehouse/hearth-react-native-icons@0.4.0
+
+- [#499](https://github.com/utilitywarehouse/hearth/pull/499) [`7b6781c`](https://github.com/utilitywarehouse/hearth/commit/7b6781cc054cf9f1ed4969a2c663abceb526c249) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes dark mode styles for several components
+
+## 0.3.0
+
+### Minor Changes
+
+- [`ce2b445`](https://github.com/utilitywarehouse/hearth/commit/ce2b445dfdd11a2912b4328d8259a604a77b31cd) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `IconContainer` component
+
+- [#423](https://github.com/utilitywarehouse/hearth/pull/423) [`af2deea`](https://github.com/utilitywarehouse/hearth/commit/af2deea62be55d6e40fe5bbb41700e054082b583) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `DescriptionList` component
+
+- [#421](https://github.com/utilitywarehouse/hearth/pull/421) [`a7974df`](https://github.com/utilitywarehouse/hearth/commit/a7974df554cb0eb499923a140ebea523fa49761c) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Removes `date` and `currency` type from the `Input` component
+
+- [#426](https://github.com/utilitywarehouse/hearth/pull/426) [`997e7cb`](https://github.com/utilitywarehouse/hearth/commit/997e7cb847e4f70de7b995c00aeeee18f1a0a1cd) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Adds updated `Badge` colour schemes and variants, replaces `solid` with `emphasis`
+
+- [#429](https://github.com/utilitywarehouse/hearth/pull/429) [`1a818ff`](https://github.com/utilitywarehouse/hearth/commit/1a818ffc97a04f412deac4e892fc2400b8ad8735) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Tabs` component
+
+- [#421](https://github.com/utilitywarehouse/hearth/pull/421) [`a7974df`](https://github.com/utilitywarehouse/hearth/commit/a7974df554cb0eb499923a140ebea523fa49761c) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `CurrencyInput` component
+
+### Patch Changes
+
+- [#430](https://github.com/utilitywarehouse/hearth/pull/430) [`a151f3a`](https://github.com/utilitywarehouse/hearth/commit/a151f3a116b97ce2756b89c07f2ac3f3105c3ff7) Thanks [@jordmccord](https://github.com/jordmccord)! - Added `autoFormatThousands` prop to `CurrencyInput` component
+
+- [#426](https://github.com/utilitywarehouse/hearth/pull/426) [`997e7cb`](https://github.com/utilitywarehouse/hearth/commit/997e7cb847e4f70de7b995c00aeeee18f1a0a1cd) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds 2 new layout spacing sizes, '2xs' and '2xl'
+
 ## 0.2.0
 
 ### Minor Changes

package/build/components/Alert/AlertCloseButton.js

@@ -2,14 +2,36 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const AlertCloseButton = ({ style, icon = CloseSmallIcon, ...props }) => (_jsx(UnstyledIconButton, { ...props, size: "sm", style: [styles.icon, style], icon: icon }));
+import { useAlertContext } from './Alert.context';
+const AlertCloseButton = ({ style, icon = CloseSmallIcon, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(UnstyledIconButton, { ...props, size: "sm", style: [styles.button, style], icon: icon, iconStyle: styles.icon }));
+};
 const styles = StyleSheet.create(theme => ({
-    icon: {
+    button: {
         alignSelf: 'flex-start',
-        color: theme.color.icon.primary,
         minWidth: 20,
         minHeight: 20,
     },
+    icon: {
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+        },
+    },
 }));
 AlertCloseButton.displayName = 'AlertCloseButton';
 export default AlertCloseButton;

package/build/components/Alert/AlertIcon.js

@@ -14,6 +14,7 @@ const AlertIcon = (props) => {
         }
         return InfoMediumIcon;
     })();
+    styles.useVariants({ colorScheme });
     return _jsx(Icon, { ...props, as: props.as ?? asProp, style: styles.icon });
 };
 AlertIcon.displayName = 'AlertIcon';
@@ -24,7 +25,22 @@ const styles = StyleSheet.create(theme => ({
         minWidth: 24,
         minHeight: 24,
         alignSelf: 'flex-start',
-        color: theme.color.icon.primary,
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+        },
     },
 }));
 export default AlertIcon;

package/build/components/Alert/AlertIconButton.js

@@ -1,6 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const AlertIconButton = ({ style, icon = ChevronRightSmallIcon, ...props }) => (_jsx(UnstyledIconButton, { ...props, size: "sm", style: style, icon: icon }));
+import { useAlertContext } from './Alert.context';
+const AlertIconButton = ({ style, icon = ChevronRightSmallIcon, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(UnstyledIconButton, { ...props, size: "sm", style: style, icon: icon, iconStyle: styles.icon }));
+};
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+        },
+    },
+}));
 AlertIconButton.displayName = 'AlertIconButton';
 export default AlertIconButton;

package/build/components/Alert/AlertLink.js

@@ -1,7 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Link } from '../Link';
+import { useAlertContext } from './Alert.context';
 const AlertLink = ({ children, ...props }) => {
-    return _jsx(Link, { ...props, children: children });
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(Link, { ...props, textStyle: styles.text, iconStyle: styles.icon, children: children }));
 };
+const styles = StyleSheet.create(theme => ({
+    text: {
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground.default,
+                    textDecorationColor: theme.color.feedback.info.foreground.default,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground.default,
+                    textDecorationColor: theme.color.feedback.positive.foreground.default,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground.default,
+                    textDecorationColor: theme.color.feedback.danger.foreground.default,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground.default,
+                    textDecorationColor: theme.color.feedback.warning.foreground.default,
+                },
+            },
+        },
+    },
+    icon: {
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+        },
+    },
+}));
 AlertLink.displayName = 'AlertLink';
 export default AlertLink;

package/build/components/Alert/AlertText.d.ts

@@ -1,6 +1,6 @@
 import { TextProps } from 'react-native';
 declare const AlertText: {
-    ({ children, ...props }: TextProps & {
+    ({ children, style, ...props }: TextProps & {
         semibold?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Alert/AlertText.js

@@ -1,7 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
-const AlertText = ({ children, ...props }) => {
-    return (_jsx(BodyText, { size: "md", ...props, children: children }));
+import { useAlertContext } from './Alert.context';
+const AlertText = ({ children, style, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(BodyText, { size: "md", style: [styles.text, style], ...props, children: children }));
 };
+const styles = StyleSheet.create(theme => ({
+    text: {
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+        },
+    },
+}));
 AlertText.displayName = 'AlertText';
 export default AlertText;

package/build/components/Alert/AlertTitle.d.ts

@@ -1,6 +1,6 @@
 import type { TextProps } from 'react-native';
 declare const AlertTitle: {
-    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default AlertTitle;

package/build/components/Alert/AlertTitle.js

@@ -1,7 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../DetailText';
-const AlertTitle = ({ children, ...props }) => {
-    return (_jsx(DetailText, { size: "md", ...props, children: children }));
+import { useAlertContext } from './Alert.context';
+const AlertTitle = ({ children, style, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(DetailText, { size: "md", style: [styles.title, style], ...props, children: children }));
 };
+const styles = StyleSheet.create(theme => ({
+    title: {
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground,
+                },
+            },
+        },
+    },
+}));
 AlertTitle.displayName = 'AlertTitle';
 export default AlertTitle;

package/build/components/Badge/Badge.js

@@ -6,7 +6,7 @@ import { BadgeContext } from './Badge.context';
 import BadgeIcon from './BadgeIcon';
 import BadgeText from './BadgeText';
 const Badge = ({ children, ...props }) => {
-    const { variant = 'solid', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, ...rest } = props;
+    const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, ...rest } = props;
     const value = useMemo(() => ({ colorScheme, flatBase, variant, size }), [colorScheme, flatBase, variant, size]);
     const childIsText = typeof children === 'string' || typeof children === 'number';
     styles.useVariants({ colorScheme, flatBase, variant, size });
@@ -34,9 +34,11 @@ const styles = StyleSheet.create(theme => ({
                 insurance: {},
                 cashback: {},
                 pig: {},
+                highlight: {},
             },
             variant: {
-                solid: {},
+                subtle: {},
+                emphasis: {},
                 outline: {
                     borderWidth: theme.components.badge.outline.borderWidth,
                     borderColor: theme.color.border.subtle,
@@ -61,84 +63,169 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
-            // Solid
+            // Emphasis
             {
                 colorScheme: 'info',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.info.surface.default,
                 },
             },
             {
                 colorScheme: 'danger',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.danger.surface.default,
                 },
             },
             {
                 colorScheme: 'positive',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.positive.surface.default,
                 },
             },
             {
                 colorScheme: 'warning',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.warning.surface.default,
                 },
             },
             {
                 colorScheme: 'functional',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.functional.surface.default,
                 },
             },
             {
                 colorScheme: 'energy',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.energy.default,
                 },
             },
             {
                 colorScheme: 'broadband',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.broadband.default,
                 },
             },
             {
                 colorScheme: 'mobile',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.mobile.default,
                 },
             },
             {
                 colorScheme: 'insurance',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.insurance.default,
                 },
             },
             {
                 colorScheme: 'cashback',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.cashback.default,
                 },
             },
             {
                 colorScheme: 'pig',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.pig.default,
                 },
             },
+            // Subtle
+            {
+                colorScheme: 'info',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.feedback.info.surface.subtle,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.feedback.danger.surface.subtle,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.feedback.positive.surface.subtle,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.feedback.warning.surface.subtle,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.feedback.functional.surface.subtle,
+                },
+            },
+            {
+                colorScheme: 'energy',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.energy.subtle,
+                },
+            },
+            {
+                colorScheme: 'broadband',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.broadband.subtle,
+                },
+            },
+            {
+                colorScheme: 'mobile',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                },
+            },
+            {
+                colorScheme: 'insurance',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                },
+            },
+            {
+                colorScheme: 'cashback',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                },
+            },
+            {
+                colorScheme: 'pig',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.pig.subtle,
+                },
+            },
+            {
+                colorScheme: 'highlight',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.subtle,
+                },
+            },
             // Outline
             {
                 colorScheme: 'info',

package/build/components/Badge/Badge.props.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 interface BadgeProps extends ViewProps {
-    variant?: 'solid' | 'outline';
-    colorScheme?: 'info' | 'positive' | 'danger' | 'warning' | 'functional' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    variant?: 'subtle' | 'emphasis' | 'outline';
+    colorScheme?: 'info' | 'positive' | 'danger' | 'warning' | 'functional' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig' | 'highlight';
     size?: 'sm' | 'md';
     icon?: ComponentType;
     flatBase?: boolean;

package/build/components/Badge/BadgeIcon.js

@@ -27,91 +27,89 @@ const styles = StyleSheet.create(theme => ({
                 insurance: {},
                 cashback: {},
                 pig: {},
+                highlight: {},
             },
             variant: {
-                solid: {
+                emphasis: {
+                    color: theme.color.text.primary,
+                },
+                subtle: {
                     color: theme.color.text.primary,
                 },
                 outline: {},
             },
         },
         compoundVariants: [
-            // Solid
+            // Emphasis
             {
                 colorScheme: 'info',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.info.foreground.default,
                 },
             },
             {
                 colorScheme: 'danger',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.danger.foreground.default,
                 },
             },
             {
                 colorScheme: 'positive',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.positive.foreground.default,
                 },
             },
             {
                 colorScheme: 'warning',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.warning.foreground.default,
                 },
             },
             {
                 colorScheme: 'functional',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.functional.foreground.default,
                 },
             },
+            // Subtle
             {
-                colorScheme: 'energy',
-                variant: 'solid',
-                styles: {
-                    color: theme.color.icon.primary,
-                },
-            },
-            {
-                colorScheme: 'broadband',
-                variant: 'solid',
+                colorScheme: 'info',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.icon.primary,
+                    color: theme.color.feedback.info.foreground.default,
                 },
             },
             {
-                colorScheme: 'mobile',
-                variant: 'solid',
+                colorScheme: 'danger',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.icon.primary,
+                    color: theme.color.feedback.danger.foreground.default,
                 },
             },
             {
-                colorScheme: 'insurance',
-                variant: 'solid',
+                colorScheme: 'positive',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.icon.primary,
+                    color: theme.color.feedback.positive.foreground.default,
                 },
             },
             {
-                colorScheme: 'cashback',
-                variant: 'solid',
+                colorScheme: 'warning',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.icon.primary,
+                    color: theme.color.feedback.warning.foreground.default,
                 },
             },
             {
-                colorScheme: 'pig',
-                variant: 'solid',
+                colorScheme: 'functional',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.icon.primary,
+                    color: theme.color.feedback.functional.foreground.default,
                 },
             },
             // Outline