@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/components/Textarea/TextareaField.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyleSheet } from 'react-native-unistyles';
 import { TextInput } from 'react-native';
-import { useTextareaContext } from './Textarea.context';
+import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
+import { useTextareaContext } from './Textarea.context';
 const TextareaField = ({ style, ...props }) => {
     const { disabled } = useTextareaContext();
-    const { components, color } = useTheme();
-    return (_jsx(TextInput, { placeholderTextColor: components.input.placeholderColor, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "top", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+    const { color } = useTheme();
+    return (_jsx(TextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "top", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 };
 TextareaField.displayName = 'TextareaField';
 const styles = StyleSheet.create(theme => ({
@@ -17,7 +17,7 @@ const styles = StyleSheet.create(theme => ({
         justifyContent: 'flex-start',
         textAlignVertical: 'top',
         alignItems: 'flex-start',
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
         fontWeight: theme.typography.mobile.bodyText.fontWeight,

package/build/components/Textarea/TextareaRoot.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { TextareaContext } from './Textarea.context';
 const TextareaRoot = ({ children, style, states, validationStatus, ...props }) => {
     const { focus = false, disabled = false, readonly = false } = states || {};
@@ -12,7 +12,7 @@ const TextareaRoot = ({ children, style, states, validationStatus, ...props }) =
 TextareaRoot.displayName = 'TextareaRoot';
 const styles = StyleSheet.create(theme => ({
     container: {
-        borderColor: theme.components.input.borderColor,
+        borderColor: theme.color.border.strong,
         height: theme.components.input.textArea.height,
         borderRadius: theme.components.input.borderRadius,
         flexDirection: 'row',
@@ -20,11 +20,11 @@ const styles = StyleSheet.create(theme => ({
         alignContent: 'center',
         paddingHorizontal: theme.components.input.paddingHorizontal,
         paddingVertical: theme.components.input.paddingVertical,
-        backgroundColor: theme.components.input.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         gap: theme.components.input.gap,
         outlineStyle: 'solid',
         outlineWidth: theme.components.input.borderWidth,
-        outlineColor: theme.components.input.borderColor,
+        outlineColor: theme.color.border.strong,
         variants: {
             focus: {
                 true: {
@@ -33,12 +33,12 @@ const styles = StyleSheet.create(theme => ({
             },
             validationStatus: {
                 invalid: {
-                    borderColor: theme.components.input.borderColorInvalid,
-                    outlineColor: theme.components.input.borderColorInvalid,
+                    borderColor: theme.color.feedback.danger.border,
+                    outlineColor: theme.color.feedback.danger.border,
                 },
                 valid: {
-                    borderColor: theme.components.input.borderColorValid,
-                    outlineColor: theme.components.input.borderColorValid,
+                    borderColor: theme.color.feedback.positive.border,
+                    outlineColor: theme.color.feedback.positive.border,
                 },
                 initial: {},
             },
@@ -49,7 +49,7 @@ const styles = StyleSheet.create(theme => ({
             },
             readonly: {
                 true: {
-                    borderColor: theme.components.input.borderColorReadOnly,
+                    borderColor: theme.color.border.subtle,
                 },
             },
         },

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
@@ -13,11 +13,11 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
 ButtonIcon.displayName = 'ButtonIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.toggleButton.foregroundColor,
+        color: theme.color.interactive.neutral.foreground.subtle,
         variants: {
             toggled: {
                 true: {
-                    color: theme.components.toggleButton.selected.foregroundColor,
+                    color: theme.color.interactive.brand.foreground.strong,
                 },
             },
         },

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -31,35 +31,35 @@ const styles = StyleSheet.create(theme => ({
         minWidth: theme.components.toggleButton.minWidth,
         paddingHorizontal: theme.components.toggleButton.paddingHorizontal,
         paddingVertical: theme.components.toggleButton.paddingVertical - theme.components.toggleButton.borderWidth,
-        borderColor: theme.components.toggleButton.borderColor,
+        borderColor: theme.color.interactive.neutral.border.subtle,
         height: theme.components.toggleButton.height,
         _web: {
             '_focus-visible': theme.helpers.focusVisible,
             _hover: {
-                backgroundColor: theme.components.toggleButton.backgroundColorHover,
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
             _active: {
-                backgroundColor: theme.components.toggleButton.backgroundColorActive,
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },
         },
         variants: {
             toggled: {
                 true: {
-                    backgroundColor: theme.components.toggleButton.selected.backgroundColor,
-                    borderColor: theme.components.toggleButton.selected.borderColor,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                    borderColor: theme.color.interactive.brand.border.strong,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.toggleButton.selected.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.brand.surface.strong.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.brand.surface.strong.active,
                         },
                     },
                 },
             },
             active: {
                 true: {
-                    backgroundColor: theme.components.toggleButton.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.active,
                 },
             },
         },
@@ -68,7 +68,7 @@ const styles = StyleSheet.create(theme => ({
                 toggled: true,
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.active,
                 },
             },
         ],

package/build/components/ToggleButton/ToggleButtonText.js

@@ -8,11 +8,11 @@ const ToggleButtonText = ({ children, toggled, ...props }) => {
 ToggleButtonText.displayName = 'ToggleButtonText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.toggleButton.foregroundColor,
+        color: theme.color.interactive.neutral.foreground.subtle,
         variants: {
             toggled: {
                 true: {
-                    color: theme.components.toggleButton.selected.foregroundColor,
+                    color: theme.color.interactive.brand.foreground.strong,
                 },
             },
         },

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js

@@ -25,9 +25,9 @@ const styles = StyleSheet.create(theme => ({
         flexDirection: 'column',
         gap: theme.components.card.selectable.gap,
         borderRadius: theme.components.card.borderRadius,
-        backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         borderWidth: theme.components.card.selectable.borderWidth,
-        borderColor: theme.components.card.selectable.borderColor,
+        borderColor: theme.color.border.subtle,
         alignSelf: 'stretch',
         padding: {
             base: theme.components.card.mobile.padding,
@@ -38,7 +38,7 @@ const styles = StyleSheet.create(theme => ({
             selected: {
                 true: {
                     borderWidth: theme.components.card.selectable.borderWidthSelected,
-                    borderColor: theme.components.card.selectable.borderColorSelected,
+                    borderColor: theme.color.border.strong,
                     margin: -theme.components.card.selectable.borderWidthSelected / 2,
                 },
             },

package/build/components/index.d.ts

@@ -2,12 +2,12 @@ export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
 export * from './BodyText';
-export * from './Box';
 export * from './BottomSheet';
+export * from './Box';
 export * from './Button';
 export * from './Card';
-export * from './Checkbox';
 export * from './Center';
+export * from './Checkbox';
 export * from './DetailText';
 export * from './Divider';
 export * from './Flex';
@@ -23,14 +23,16 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Modal';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SectionHeader';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
 export * from './Textarea';
 export * from './ToggleButtonCard';
-export { FlatList, ScrollView, KeyboardAvoidingView, StatusBar, View, SectionList, Image, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/index.js

@@ -3,12 +3,12 @@ export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
 export * from './BodyText';
-export * from './Box';
 export * from './BottomSheet';
+export * from './Box';
 export * from './Button';
 export * from './Card';
-export * from './Checkbox';
 export * from './Center';
+export * from './Checkbox';
 export * from './DetailText';
 export * from './Divider';
 export * from './Flex';
@@ -24,14 +24,16 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Modal';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SectionHeader';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
 export * from './Textarea';
 export * from './ToggleButtonCard';
-export { FlatList, ScrollView, KeyboardAvoidingView, StatusBar, View, SectionList, Image, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';