@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

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

@@ -2,7 +2,7 @@ import { PressableProps, ViewStyle } from 'react-native';
 import { SpaceValue } from '../../types';
 interface CardProps extends PressableProps {
     variant?: 'emphasis' | 'subtle';
-    colorScheme?: 'white' | 'warmWhite' | 'purple' | 'energyBlue' | 'broadbandGreen' | 'mobileRose' | 'insuranceOrange' | 'cashbackLilac' | 'piggyPink';
+    colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
     space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/build/components/Card/CardRoot.js

@@ -24,7 +24,7 @@ const collectChildActionHandlers = (children) => React.Children.toArray(children
     }
     return handlers;
 }, []);
-const Card = ({ children, variant = 'subtle', colorScheme = 'white', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
+const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
     // Extract style props using our custom hook
@@ -62,39 +62,39 @@ const styles = StyleSheet.create(theme => ({
             variant: {
                 subtle: {
                     borderWidth: theme.components.card.neutral.subtle.borderWidth,
-                    borderColor: theme.components.card.neutral.subtle.borderColor,
+                    borderColor: theme.color.border.subtle,
                 },
                 emphasis: {
                     borderWidth: theme.components.card.neutral.emphasis.borderWidth,
-                    borderColor: theme.components.card.neutral.emphasis.borderColor,
+                    borderColor: theme.color.border.strong,
                 },
             },
             colorScheme: {
-                white: {
-                    backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+                neutralStrong: {
+                    backgroundColor: theme.color.surface.neutral.strong,
                 },
-                warmWhite: {
-                    backgroundColor: theme.components.card.neutral.warmWhiteBackgroundColor,
+                neutralSubtle: {
+                    backgroundColor: theme.color.surface.neutral.subtle,
                 },
-                purple: {
+                brand: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                energyBlue: {
+                energy: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                broadbandGreen: {
+                broadband: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                mobileRose: {
+                mobile: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                insuranceOrange: {
+                insurance: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                cashbackLilac: {
+                cashback: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                piggyPink: {
+                pig: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
             },
@@ -128,114 +128,114 @@ const styles = StyleSheet.create(theme => ({
         compoundVariants: [
             {
                 variant: 'subtle',
-                colorScheme: 'purple',
+                colorScheme: 'brand',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.purpleBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.brand.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'purple',
+                colorScheme: 'brand',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.purpleBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.brand.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'energyBlue',
+                colorScheme: 'energy',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.energyBlueBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.energy.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'energyBlue',
+                colorScheme: 'energy',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.energyBlueBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.energy.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'broadbandGreen',
+                colorScheme: 'broadband',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.broadbandGreenBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.broadband.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'broadbandGreen',
+                colorScheme: 'broadband',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.broadbandGreenBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.broadband.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'mobileRose',
+                colorScheme: 'mobile',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.mobileRoseBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'mobileRose',
+                colorScheme: 'mobile',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.mobileRoseBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.mobile.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'insuranceOrange',
+                colorScheme: 'insurance',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.insuranceOrangeBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'insuranceOrange',
+                colorScheme: 'insurance',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.insuranceOrangeBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.insurance.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'cashbackLilac',
+                colorScheme: 'cashback',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.cashbackLilacBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'cashbackLilac',
+                colorScheme: 'cashback',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.cashbackLilacBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.cashback.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'piggyPink',
+                colorScheme: 'pig',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.piggyPinkBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.pig.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'piggyPink',
+                colorScheme: 'pig',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.piggyPinkBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.pig.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
         ],

package/build/components/Checkbox/CheckboxIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../Icon';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { StyleSheet } from 'react-native-unistyles';
 import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
 const CheckboxIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: TickSmallIcon, ...props, style: Platform.OS === 'web'
             ? StyleSheet.compose(styles.icon, style)
@@ -10,7 +10,7 @@ const CheckboxIcon = ({ style, ...props }) => {
 };
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.checkbox.checked.iconColor,
+        color: theme.color.icon.inverted,
     },
 }));
 CheckboxIcon.displayName = 'CheckboxIcon';

package/build/components/Checkbox/CheckboxIndicator.js

@@ -17,8 +17,8 @@ const styles = StyleSheet.create(theme => ({
     container: {
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: theme.components.checkbox.unchecked.backgroundColor,
-        borderColor: theme.components.checkbox.unchecked.borderColor,
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderColor: theme.color.border.strong,
         borderWidth: theme.components.checkbox.borderWidth,
         borderRadius: theme.components.checkbox.borderRadius,
         width: 24,
@@ -40,7 +40,7 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             checked: {
                 true: {
-                    borderColor: theme.components.checkbox.checked.borderColor,
+                    borderColor: theme.color.border.strong,
                     backgroundColor: theme.components.checkbox.checked.backgroundColor,
                 },
             },

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -18,14 +18,14 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.checkbox.gap,
         padding: theme.components.checkbox.tile.padding,
         borderWidth: theme.components.checkbox.tile.borderWidth,
-        borderColor: theme.components.checkbox.tile.borderColor,
+        borderColor: theme.color.border.subtle,
         borderRadius: theme.components.checkbox.tile.borderRadius,
-        backgroundColor: theme.components.checkbox.tile.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         variants: {
             checked: {
                 true: {
                     borderWidth: theme.components.checkbox.tile.borderWidthSelected,
-                    borderColor: theme.components.checkbox.tile.borderColorSelected,
+                    borderColor: theme.color.border.strong,
                     margin: -theme.components.checkbox.tile.borderWidthSelected / 2,
                 },
             },

package/build/components/DetailText/DetailText.js

@@ -42,7 +42,7 @@ const DetailText = ({ children, color, size = 'md', truncated, underline, strike
 DetailText.displayName = 'DetailText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontWeight: theme.fontWeight.regular,
         fontFamily: theme.typography.mobile.detailText.fontFamily,
         fontStyle: 'normal',
@@ -106,7 +106,7 @@ const styles = StyleSheet.create(theme => ({
             },
             inverted: {
                 true: {
-                    color: theme.components.text.colorInverted,
+                    color: theme.color.text.inverted,
                 },
             },
         },

package/build/components/Divider/Divider.js

@@ -14,7 +14,7 @@ const Divider = ({ orientation = 'horizontal', color, space, height, width, flex
 Divider.displayName = 'Divider';
 const styles = StyleSheet.create(theme => ({
     divider: {
-        backgroundColor: theme.components.divider.color,
+        backgroundColor: theme.color.border.subtle,
         variants: {
             orientation: {
                 horizontal: {

package/build/components/Heading/Heading.js

@@ -41,7 +41,7 @@ const Heading = ({ children, color, size = 'lg', truncated, underline, strikeThr
 Heading.displayName = 'Heading';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontFamily: theme.typography.mobile.heading.fontFamily,
         marginVertical: 0,
         fontStyle: 'normal',
@@ -128,7 +128,7 @@ const styles = StyleSheet.create(theme => ({
             },
             inverted: {
                 true: {
-                    color: theme.components.text.colorInverted,
+                    color: theme.color.text.inverted,
                 },
             },
         },

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

@@ -1,4 +1,5 @@
-import type { TextProps, TextStyle } from 'react-native';
+import type { Ref } from 'react';
+import type { Text, TextProps, TextStyle } from 'react-native';
 import type { ColorValue } from '../../types';
 interface HeadingProps extends TextProps {
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -14,5 +15,6 @@ interface HeadingProps extends TextProps {
     textDecorationColor?: ColorValue;
     userSelect?: TextStyle['userSelect'];
     inverted?: boolean;
+    ref?: Ref<Text>;
 }
 export default HeadingProps;

package/build/components/Helper/HelperIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { useHelperContext } from './HelperContext';
-import { Platform } from 'react-native';
 const HelperIcon = (props) => {
     const { validationStatus } = useHelperContext();
     styles.useVariants({ validationStatus });
@@ -18,10 +18,10 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             validationStatus: {
                 valid: {
-                    color: theme.components.text.colorValid,
+                    color: theme.color.feedback.positive.foreground.subtle,
                 },
                 invalid: {
-                    color: theme.components.text.colorInvalid,
+                    color: theme.color.feedback.danger.foreground.subtle,
                 },
                 initial: {},
             },

package/build/components/Helper/HelperText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { useHelperContext } from './HelperContext';
 import { BodyText } from '../BodyText';
+import { useHelperContext } from './HelperContext';
 const HelperText = (props) => {
     const { validationStatus, disabled } = useHelperContext();
     styles.useVariants({ validationStatus, disabled });
@@ -10,14 +10,14 @@ const HelperText = (props) => {
 HelperText.displayName = 'HelperText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.colorSecondary,
+        color: theme.color.text.secondary,
         variants: {
             validationStatus: {
                 valid: {
-                    color: theme.components.text.colorValid,
+                    color: theme.color.feedback.positive.foreground.subtle,
                 },
                 invalid: {
-                    color: theme.components.text.colorInvalid,
+                    color: theme.color.feedback.danger.foreground.subtle,
                 },
                 initial: {},
             },

package/build/components/IconButton/IconButtonIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Platform } from 'react-native';
-import { useIconButtonContext } from './IconButton.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
+import { useIconButtonContext } from './IconButton.context';
 const IconButtonIcon = (props) => {
     const { colorScheme, variant, inverted, disabled, size } = useIconButtonContext();
     styles.useVariants({
@@ -27,10 +27,10 @@ const styles = StyleSheet.create(theme => ({
                 ghost: {},
             },
             colorScheme: {
-                yellow: {},
-                red: {},
-                green: {},
-                grey: {},
+                highlight: {},
+                destructive: {},
+                affirmative: {},
+                functional: {},
             },
             inverted: {
                 true: {},
@@ -52,88 +52,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,
                 },
             },
         ],