@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/components/Badge/Badge.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } 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 { BadgeContext } from './Badge.context';
-import BadgeText from './BadgeText';
 import BadgeIcon from './BadgeIcon';
+import BadgeText from './BadgeText';
 const Badge = ({ children, ...props }) => {
-    const { variant = 'solid', icon, colorScheme = 'blue', flatBase = false, style, ...rest } = props;
-    const value = useMemo(() => ({ colorScheme, flatBase, variant }), [colorScheme, flatBase, variant]);
+    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 });
+    styles.useVariants({ colorScheme, flatBase, variant, size });
     return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? _jsx(BadgeText, { children: children }) : children] }) }));
 };
 Badge.displayName = 'Badge';
@@ -20,21 +20,38 @@ const styles = StyleSheet.create(theme => ({
         alignSelf: 'flex-start',
         paddingHorizontal: theme.components.badge.paddingHorizontal,
         borderRadius: theme.components.badge.borderRadius,
-        paddingVertical: theme.components.badge.paddingVertical,
         gap: theme.components.badge.gap,
         variants: {
             colorScheme: {
-                blue: {},
-                red: {},
-                green: {},
-                orange: {},
-                grey: {},
+                info: {},
+                danger: {},
+                positive: {},
+                warning: {},
+                functional: {},
+                energy: {},
+                broadband: {},
+                mobile: {},
+                insurance: {},
+                cashback: {},
+                pig: {},
+                highlight: {},
             },
             variant: {
-                solid: {},
+                subtle: {},
+                emphasis: {},
                 outline: {
                     borderWidth: theme.components.badge.outline.borderWidth,
-                    borderColor: theme.components.badge.outline.borderColor,
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+            size: {
+                sm: {
+                    paddingVertical: theme.components.badge.sm.paddingVertical,
+                    height: theme.components.badge.sm.height,
+                },
+                md: {
+                    paddingVertical: theme.components.badge.md.paddingVertical,
+                    height: theme.components.badge.md.height,
                 },
             },
             flatBase: {
@@ -46,71 +63,200 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
+            // Emphasis
+            {
+                colorScheme: 'info',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.feedback.info.surface.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.feedback.danger.surface.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.feedback.positive.surface.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.feedback.warning.surface.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.feedback.functional.surface.default,
+                },
+            },
+            {
+                colorScheme: 'energy',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.surface.energy.default,
+                },
+            },
+            {
+                colorScheme: 'broadband',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.surface.broadband.default,
+                },
+            },
+            {
+                colorScheme: 'mobile',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.surface.mobile.default,
+                },
+            },
+            {
+                colorScheme: 'insurance',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.surface.insurance.default,
+                },
+            },
+            {
+                colorScheme: 'cashback',
+                variant: 'emphasis',
+                styles: {
+                    backgroundColor: theme.color.surface.cashback.default,
+                },
+            },
+            {
+                colorScheme: 'pig',
+                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: 'blue',
-                variant: 'solid',
+                colorScheme: 'mobile',
+                variant: 'subtle',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.blue.backgroundColor,
+                    backgroundColor: theme.color.surface.mobile.subtle,
                 },
             },
             {
-                colorScheme: 'red',
-                variant: 'solid',
+                colorScheme: 'insurance',
+                variant: 'subtle',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.red.backgroundColor,
+                    backgroundColor: theme.color.surface.insurance.subtle,
                 },
             },
             {
-                colorScheme: 'green',
-                variant: 'solid',
+                colorScheme: 'cashback',
+                variant: 'subtle',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.green.backgroundColor,
+                    backgroundColor: theme.color.surface.cashback.subtle,
                 },
             },
             {
-                colorScheme: 'orange',
-                variant: 'solid',
+                colorScheme: 'pig',
+                variant: 'subtle',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.orange.backgroundColor,
+                    backgroundColor: theme.color.surface.pig.subtle,
                 },
             },
             {
-                colorScheme: 'grey',
-                variant: 'solid',
+                colorScheme: 'highlight',
+                variant: 'subtle',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.grey.backgroundColor,
+                    backgroundColor: theme.color.surface.highlight.subtle,
                 },
             },
+            // Outline
             {
-                colorScheme: 'blue',
+                colorScheme: 'info',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'red',
+                colorScheme: 'danger',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'green',
+                colorScheme: 'positive',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'orange',
+                colorScheme: 'warning',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',

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

@@ -1,8 +1,9 @@
 import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 interface BadgeProps extends ViewProps {
-    variant?: 'solid' | 'outline';
-    colorScheme?: 'blue' | 'green' | 'red' | 'orange' | 'grey';
+    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

@@ -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,66 @@ 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: {},
+                highlight: {},
             },
             variant: {
-                solid: {
-                    color: theme.components.badge.solid.color,
+                emphasis: {
+                    color: theme.color.text.primary,
+                },
+                subtle: {
+                    color: theme.color.text.primary,
                 },
                 outline: {},
             },
         },
         compoundVariants: [
+            // 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

@@ -3,62 +3,73 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { useBadgeContext } from './Badge.context';
 const BadgeText = ({ children, style, ...props }) => {
-    const { variant, colorScheme } = useBadgeContext();
+    const { variant, colorScheme, size } = useBadgeContext();
     styles.useVariants({ variant, colorScheme });
-    return (_jsx(BodyText, { ...props, size: "sm", style: [styles.text, style], children: children }));
+    return (_jsx(BodyText, { ...props, size: size, 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: {},
+                highlight: {},
             },
             variant: {
-                solid: {
-                    color: theme.components.badge.solid.color,
+                emphasis: {
+                    color: theme.color.text.primary,
+                },
+                subtle: {
+                    color: theme.color.text.primary,
                 },
                 outline: {},
             },
         },
         compoundVariants: [
+            // 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/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.d.ts

@@ -6,12 +6,12 @@ export declare const ButtonGroupComponent: import("react").ForwardRefExoticCompo
     flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
-    space?: "xs" | "sm" | "md" | "lg" | "xl";
+    space?: import("../../types").SpacingValues;
 }> & import("react-native").ViewProps & {
     flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
-    space?: "xs" | "sm" | "md" | "lg" | "xl";
+    space?: import("../../types").SpacingValues;
 } & import("@gluestack-ui/button/lib/typescript/types").IButtonGroupProps>;
 declare const Button: {
     ({ children, disabled, pressed, text, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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/ButtonGroupRoot.d.ts

@@ -1,10 +1,11 @@
-import { type ViewStyle, type ViewProps } from 'react-native';
+import { type ViewProps, type ViewStyle } from 'react-native';
+import { SpacingValues } from '../../types';
 declare const ButtonGroupRoot: {
     ({ children, attached, flexDirection, reversed, space, ...props }: ViewProps & {
         flexDirection?: ViewStyle["flexDirection"];
         reversed?: boolean;
         attached?: boolean;
-        space?: "xs" | "sm" | "md" | "lg" | "xl";
+        space?: SpacingValues;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };