@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/components/Badge/BadgeIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { useBadgeContext } from './Badge.context';
 import { Icon } from '../Icon';
+import { useBadgeContext } from './Badge.context';
 const BadgeIcon = (props) => {
     const { colorScheme, variant } = useBadgeContext();
     styles.useVariants({ colorScheme, variant });
@@ -14,56 +14,140 @@ const styles = StyleSheet.create(theme => ({
         height: 20,
         minWidth: 20,
         minHeight: 20,
-        alignSelf: 'flex-start',
         variants: {
             colorScheme: {
-                blue: {},
-                red: {},
-                green: {},
-                orange: {},
-                grey: {},
+                info: {},
+                danger: {},
+                positive: {},
+                warning: {},
+                functional: {},
+                energy: {},
+                broadband: {},
+                mobile: {},
+                insurance: {},
+                cashback: {},
+                pig: {},
             },
             variant: {
                 solid: {
-                    color: theme.components.badge.solid.color,
+                    color: theme.color.text.primary,
                 },
                 outline: {},
             },
         },
         compoundVariants: [
+            // Solid
+            {
+                colorScheme: 'info',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.functional.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'energy',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.icon.primary,
+                },
+            },
+            {
+                colorScheme: 'broadband',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.icon.primary,
+                },
+            },
+            {
+                colorScheme: 'mobile',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.icon.primary,
+                },
+            },
+            {
+                colorScheme: 'insurance',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.icon.primary,
+                },
+            },
+            {
+                colorScheme: 'cashback',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.icon.primary,
+                },
+            },
+            {
+                colorScheme: 'pig',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.icon.primary,
+                },
+            },
+            // Outline
             {
-                colorScheme: 'blue',
+                colorScheme: 'info',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.blue.color,
+                    color: theme.color.feedback.info.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'red',
+                colorScheme: 'danger',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.red.color,
+                    color: theme.color.feedback.danger.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'green',
+                colorScheme: 'positive',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.green.color,
+                    color: theme.color.feedback.positive.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'orange',
+                colorScheme: 'warning',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.orange.color,
+                    color: theme.color.feedback.warning.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.grey.color,
+                    color: theme.color.feedback.functional.foreground.subtle,
                 },
             },
         ],

package/build/components/Badge/BadgeText.js

@@ -5,60 +5,145 @@ import { useBadgeContext } from './Badge.context';
 const BadgeText = ({ children, style, ...props }) => {
     const { variant, colorScheme } = useBadgeContext();
     styles.useVariants({ variant, colorScheme });
-    return (_jsx(BodyText, { ...props, size: "sm", style: [styles.text, style], children: children }));
+    return (_jsx(BodyText, { ...props, size: "md", weight: "semibold", style: [styles.text, style], children: children }));
 };
 BadgeText.displayName = 'BadgeText';
 const styles = StyleSheet.create(theme => ({
     text: {
         variants: {
             colorScheme: {
-                blue: {},
-                red: {},
-                green: {},
-                orange: {},
-                grey: {},
+                info: {},
+                danger: {},
+                positive: {},
+                warning: {},
+                functional: {},
+                energy: {},
+                broadband: {},
+                mobile: {},
+                insurance: {},
+                cashback: {},
+                pig: {},
             },
             variant: {
                 solid: {
-                    color: theme.components.badge.solid.color,
+                    color: theme.color.text.primary,
                 },
                 outline: {},
             },
         },
         compoundVariants: [
+            // Solid
             {
-                colorScheme: 'blue',
+                colorScheme: 'info',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.feedback.functional.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'energy',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.text.primary,
+                },
+            },
+            {
+                colorScheme: 'broadband',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.text.primary,
+                },
+            },
+            {
+                colorScheme: 'mobile',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.text.primary,
+                },
+            },
+            {
+                colorScheme: 'insurance',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.text.primary,
+                },
+            },
+            {
+                colorScheme: 'cashback',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.text.primary,
+                },
+            },
+            {
+                colorScheme: 'pig',
+                variant: 'solid',
+                styles: {
+                    color: theme.color.text.primary,
+                },
+            },
+            // Outline
+            {
+                colorScheme: 'info',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.blue.color,
+                    color: theme.color.feedback.info.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'red',
+                colorScheme: 'danger',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.red.color,
+                    color: theme.color.feedback.danger.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'green',
+                colorScheme: 'positive',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.green.color,
+                    color: theme.color.feedback.positive.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'orange',
+                colorScheme: 'warning',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.orange.color,
+                    color: theme.color.feedback.warning.foreground.subtle,
                 },
             },
             {
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 variant: 'outline',
                 styles: {
-                    color: theme.components.badge.outline.grey.color,
+                    color: theme.color.feedback.functional.foreground.subtle,
                 },
             },
         ],

package/build/components/BodyText/BodyText.js

@@ -33,7 +33,7 @@ const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular',
 BodyText.displayName = 'BodyText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
         fontStyle: 'normal',
         variants: {
@@ -79,7 +79,7 @@ const styles = StyleSheet.create(theme => ({
             },
             inverted: {
                 true: {
-                    color: theme.components.text.colorInverted,
+                    color: theme.color.text.inverted,
                 },
             },
         },

package/build/components/BottomSheet/BottomSheet.d.ts

@@ -1,5 +1,5 @@
-import type BottomSheetProps from './BottomSheet.props';
 import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type BottomSheetProps from './BottomSheet.props';
 type BottomSheet = BottomSheetMethods;
 declare const BottomSheet: {
     ({ children, containerStyle, handleStyle, backdrop, showHandle, ref, ...rest }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;

package/build/components/BottomSheet/BottomSheet.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
 import BottomSheetCore from '@gorhom/bottom-sheet';
+import React, { useMemo } from 'react';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
-import useBottomSheetLogic from './useBottomSheetLogic';
 import { BottomSheetContext } from './BottomSheet.context';
+import useBottomSheetLogic from './useBottomSheetLogic';
 const StyledBottomSheetCore = withUnistyles(BottomSheetCore);
 const BottomSheet = ({ children, containerStyle, handleStyle, backdrop = true, showHandle = true, ref, ...rest }) => {
     const bottomSheetRef = React.useRef(null);
@@ -24,7 +24,7 @@ const styles = StyleSheet.create(theme => ({
     background: {
         borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
         borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-        backgroundColor: theme.components.bottomSheet.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
     },
 }));
 BottomSheet.displayName = 'BottomSheet';

package/build/components/BottomSheet/BottomSheetHandle.js

@@ -11,7 +11,7 @@ const BottomSheetHandle = ({ style, indicatorStyle, ...props }) => {
 };
 const styles = StyleSheet.create(theme => ({
     handle: {
-        backgroundColor: theme.components.bottomSheet.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
         borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
         paddingTop: theme.components.bottomSheet.padding,

package/build/components/BottomSheet/BottomSheetModal.js

@@ -25,7 +25,7 @@ const styles = StyleSheet.create(theme => ({
     background: {
         borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
         borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-        backgroundColor: theme.components.bottomSheet.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
     },
 }));
 BottomSheetModal.displayName = 'BottomSheetModal';

package/build/components/BottomSheet/BottomSheetScrollView.js

@@ -12,7 +12,9 @@ const BottomSheetScrollView = ({ children, style, contentContainerStyle, isModal
     return (_jsx(StyledBottomSheetScrollView, { style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props, children: children }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
-    container: {},
+    container: {
+        backgroundColor: theme.color.surface.neutral.strong,
+    },
     contentContainer: {
         paddingHorizontal: theme.components.bottomSheet.padding,
         paddingBottom: theme.components.bottomSheet.padding,

package/build/components/BottomSheet/BottomSheetView.js

@@ -15,7 +15,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     contentContainer: {
         borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
         borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-        backgroundColor: theme.components.bottomSheet.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         paddingHorizontal: theme.components.bottomSheet.padding,
         paddingBottom: theme.components.bottomSheet.padding,
         variants: {

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

@@ -2,31 +2,31 @@ import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 export type ButtonVariants = {
     variant?: 'solid';
-    colorScheme?: 'green' | 'red';
+    colorScheme?: 'affirmative' | 'destructive';
     inverted?: never;
 } | {
     variant?: 'outline';
-    colorScheme: 'green' | 'red';
+    colorScheme: 'affirmative' | 'destructive';
     inverted?: never;
 } | {
     variant?: 'ghost';
-    colorScheme: 'green' | 'red';
+    colorScheme: 'affirmative' | 'destructive';
     inverted?: never;
 } | {
     variant?: 'emphasis';
-    colorScheme?: 'yellow';
+    colorScheme?: 'highlight';
     inverted?: boolean;
 } | {
     variant?: 'solid';
-    colorScheme?: 'yellow';
+    colorScheme?: 'highlight';
     inverted?: boolean;
 } | {
     variant?: 'outline';
-    colorScheme: 'grey';
+    colorScheme: 'functional';
     inverted?: boolean;
 } | {
     variant?: 'ghost';
-    colorScheme: 'grey';
+    colorScheme: 'functional';
     inverted?: boolean;
 };
 export type BaseButtonProps = Omit<PressableProps, 'children'> & {

package/build/components/Button/ButtonIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Platform } from 'react-native';
-import { useButtonContext } from './Button.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
+import { useButtonContext } from './Button.context';
 const ButtonIcon = ({ children, ...props }) => {
     const { colorScheme, variant, inverted, disabled } = useButtonContext();
     styles.useVariants({ colorScheme, variant, inverted, disabled });
@@ -21,10 +21,10 @@ const styles = StyleSheet.create(theme => ({
                 ghost: {},
             },
             colorScheme: {
-                yellow: {},
-                red: {},
-                green: {},
-                grey: {},
+                highlight: {},
+                destructive: {},
+                affirmative: {},
+                functional: {},
             },
             inverted: {
                 true: {},
@@ -36,88 +36,88 @@ const styles = StyleSheet.create(theme => ({
         compoundVariants: [
             {
                 variant: 'emphasis',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 styles: {
-                    color: theme.components.button.emphasis.yellow.foregroundColor,
+                    color: theme.color.interactive.highlight.foreground.strong,
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 styles: {
-                    color: theme.components.button.solid.yellow.foregroundColor,
+                    color: theme.color.interactive.highlight.foreground.strong,
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    color: theme.components.button.solid.red.foregroundColor,
+                    color: theme.color.interactive.destructive.foreground.strong,
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    color: theme.components.button.solid.green.foregroundColor,
+                    color: theme.color.interactive.affirmative.foreground.strong,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    color: theme.components.button.outline.red.foregroundColor,
+                    color: theme.color.interactive.destructive.foreground.subtle,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    color: theme.components.button.outline.green.foregroundColor,
+                    color: theme.color.interactive.affirmative.foreground.subtle,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 styles: {
-                    color: theme.components.button.outline.grey.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.subtle,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 styles: {
-                    color: theme.components.button.outline.grey.inverted.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.strong,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    color: theme.components.button.ghost.red.foregroundColor,
+                    color: theme.color.interactive.destructive.foreground.subtle,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    color: theme.components.button.ghost.green.foregroundColor,
+                    color: theme.color.interactive.affirmative.foreground.subtle,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 styles: {
-                    color: theme.components.button.outline.grey.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.subtle,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 styles: {
-                    color: theme.components.button.outline.grey.inverted.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.strong,
                 },
             },
         ],