@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

package/build/components/HighlightBanner/HighlightBanner.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Card } from '../Card';
+const HighlightBanner = ({ heading, headingColor, image, imageContainerHeight, description, link, button, variant = 'emphasis', style, ...props }) => {
+    styles.useVariants({ headingColor, variant });
+    return (_jsx(Card, { variant: variant, noPadding: true, style: style, ...props, children: _jsxs(View, { style: [styles.container], children: [_jsx(View, { style: [styles.header], children: _jsx(BodyText, { size: "md", textAlign: "center", weight: "semibold", children: heading }) }), _jsx(View, { style: styles.imageContainer(imageContainerHeight), children: _jsx(Image, { resizeMode: "cover", ...image, style: [styles.image, image?.style] }) }), _jsxs(View, { style: styles.footer, children: [_jsx(BodyText, { size: "md", textAlign: "center", children: description }), link && _jsx(View, { style: styles.linkContainer, children: link }), button && _jsx(View, { style: styles.buttonContainer, children: button })] })] }) }));
+};
+HighlightBanner.displayName = 'HighlightBanner';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        overflow: 'hidden',
+        flex: 1,
+        width: '100%',
+    },
+    header: {
+        padding: theme.components.banner.highlight.padding,
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            headingColor: {
+                highlight: {
+                    backgroundColor: theme.color.surface.highlight.subtle,
+                },
+                pig: {
+                    backgroundColor: theme.color.surface.pig.subtle,
+                },
+                energy: {
+                    backgroundColor: theme.color.surface.energy.subtle,
+                },
+                broadband: {
+                    backgroundColor: theme.color.surface.broadband.subtle,
+                },
+                mobile: {
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                },
+                insurance: {
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                },
+                cashback: {
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                },
+            },
+            variant: {
+                emphasis: {
+                    borderColor: theme.color.border.strong,
+                    borderBottomWidth: theme.borderWidth[2],
+                },
+                subtle: {
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+        },
+    },
+    imageContainer: (height = 200) => ({
+        width: '100%',
+        height,
+    }),
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    footer: {
+        padding: theme.components.banner.highlight.padding,
+        gap: theme.components.banner.highlight.content.gap,
+        variants: {
+            variant: {
+                emphasis: {
+                    borderColor: theme.color.border.strong,
+                    borderTopWidth: theme.borderWidth[2],
+                },
+                subtle: {
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+        },
+    },
+    linkContainer: {
+        alignItems: 'center',
+    },
+    buttonContainer: {
+        alignItems: 'stretch',
+    },
+}));
+export default HighlightBanner;

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ImageProps } from 'react-native';
+import CardProps from '../Card/Card.props';
+interface HighlightBannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
+    heading?: string;
+    headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+    variant?: 'emphasis' | 'subtle';
+    image?: ImageProps;
+    imageContainerHeight?: number;
+    description?: string;
+    link?: ReactElement;
+    button?: ReactElement;
+}
+export default HighlightBannerProps;

package/build/components/HighlightBanner/HighlightBanner.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/HighlightBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HighlightBanner } from './HighlightBanner';
+export type { default as HighlightBannerProps } from './HighlightBanner.props';

package/build/components/HighlightBanner/index.js

@@ -0,0 +1 @@
+export { default as HighlightBanner } from './HighlightBanner';

package/build/components/Icon/Icon.d.ts

@@ -1,8 +1,4 @@
+import type React from 'react';
 import type IconProps from './Icon.props';
-export declare const Icon: import("@gluestack-ui/icon/lib/typescript/createIcon").IIconComponentType<(Partial<IconProps> & {
-    uniProps?: import("react-native-unistyles/lib/typescript/src/core/withUnistyles/types").Mappings<IconProps> | undefined;
-} & import("react").RefAttributes<never>) | {
-    fill?: import("react-native").ColorValue | undefined;
-    stroke?: import("react-native").ColorValue | undefined;
-}>;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps>;
 export default Icon;

package/build/components/IconButton/IconButtonIcon.js

@@ -13,7 +13,8 @@ const IconButtonIcon = (props) => {
         size,
     });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: props.children }));
 };
 IconButtonIcon.displayName = 'IconButtonIcon';

package/build/components/IconContainer/IconContainer.d.ts

@@ -1,5 +1,6 @@
 import type IconContainerProps from './IconContainer.props';
-declare const IconContainer: import("react").ForwardRefExoticComponent<Partial<IconContainerProps> & {
-    uniProps?: import("react-native-unistyles/lib/typescript/src/core/withUnistyles/types").Mappings<IconContainerProps> | undefined;
-} & import("react").RefAttributes<never>>;
+declare const IconContainer: {
+    ({ icon: IconComp, size, radiusNone, variant, color, style, ...props }: IconContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default IconContainer;

package/build/components/IconContainer/IconContainer.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-const IconContainer = withUnistyles(({ icon: IconComp, size = 'md', radiusNone = false, variant = 'subtle', color = 'pig', style, ...props }) => {
+const IconContainer = ({ icon: IconComp, size = 'md', radiusNone = false, variant = 'subtle', color = 'pig', style, ...props }) => {
     styles.useVariants({ size, radiusNone, variant, color });
     return (_jsx(View, { style: [styles.container, style], ...props, children: IconComp ? _jsx(Icon, { as: IconComp, style: styles.icon }) : null }));
-});
+};
 IconContainer.displayName = 'IconContainer';
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/Input/InputField.js

@@ -9,7 +9,9 @@ const InputField = ({ style, inBottomSheet = false, ...props }) => {
     styles.useVariants({ focused, type });
     const { color } = useTheme();
     if (inBottomSheet) {
-        return (_jsx(BottomSheetTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+        return (
+        // @ts-expect-error - BottomSheetTextInput type issue
+        _jsx(BottomSheetTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
     }
     return (_jsx(RNTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 };
@@ -24,7 +26,7 @@ const styles = StyleSheet.create(theme => ({
         color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
-        fontWeight: theme.typography.mobile.bodyText.fontWeight,
+        fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
         borderWidth: 0,
         variants: {
             focused: {

package/build/components/Input/InputIcon.js

@@ -4,7 +4,8 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 const InputIcon = ({ children, ...props }) => {
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 InputIcon.displayName = 'InputIcon';

package/build/components/Link/LinkIcon.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Platform } from 'react-native';
-import { useLinkContext } from './Link.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
+import { useLinkContext } from './Link.context';
 const LinkIcon = ({ children, ...props }) => {
     const { active, inverted, disabled } = useLinkContext();
     styles.useVariants({ active, inverted, disabled });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 LinkIcon.displayName = 'LinkIcon';

package/build/components/List/ListAction/ListActionTrailingIcon.js

@@ -4,7 +4,8 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../../Icon';
 const ListActionTrailingIcon = ({ children, ...props }) => {
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ListActionTrailingIcon.displayName = 'ListActionTrailingIcon';

package/build/components/List/ListItem/ListItemIcon.js

@@ -4,7 +4,8 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../../Icon';
 const ListItemIcon = ({ children, ...props }) => {
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ListItemIcon.displayName = 'ListItemIcon';

package/build/components/List/ListItem/ListItemTrailingIcon.js

@@ -4,15 +4,14 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../../Icon';
 const ListItemTrailingIcon = ({ children, ...props }) => {
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ListItemTrailingIcon.displayName = 'ListItemTrailingIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
         color: theme.color.icon.primary,
-        width: 24,
-        height: 24,
     },
 }));
 export default ListItemTrailingIcon;

package/build/components/Radio/RadioIcon.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { CircleIcon } from '../Icons';
-import { Platform } from 'react-native';
 const RadioIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: CircleIcon, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.container, style)
+            ? {
+                // @ts-expect-error - style prop type issue
+                ...styles.container,
+                // @ts-expect-error - style prop type issue
+                ...props.style,
+            }
             : [styles.container, style] }));
 };
 RadioIcon.displayName = 'RadioIcon';

package/build/components/RadioCard/RadioCardIcon.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { CircleIcon } from '../Icons';
-import { Platform } from 'react-native';
 const RadioCardIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: CircleIcon, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.container, style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.container, ...props.style }
             : [styles.container, style] }));
 };
 RadioCardIcon.displayName = 'RadioCardIcon';

package/build/components/Spinner/Spinner.web.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type SpinnerProps from './Spinner.props';
-declare const Spinner: import("react").ComponentType<SpinnerProps>;
+declare const Spinner: React.ComponentType<SpinnerProps>;
 export default Spinner;

package/build/components/Switch/Switch.js

@@ -4,10 +4,12 @@ import { useEffect } from 'react';
 import { Pressable } from 'react-native';
 import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
     const { components, color } = useTheme();
+    const theme = useAnimatedTheme();
     const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
     const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
     const PADDING = components.switch.padding;
@@ -17,11 +19,11 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
     const progress = useSharedValue(value ? 1 : 0);
     const animatedThumbStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: offset.value }],
-    }));
+    }), [offset]);
     const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
         const backgroundColor = interpolateColor(progress.value, [0, 1], [
-            color.interactive.functional.surface.strong.default,
-            color.interactive.brand.surface.strong.default,
+            theme.value.color.interactive.functional.surface.strong.default,
+            theme.value.color.interactive.brand.surface.strong.default,
         ]);
         return { backgroundColor };
     });

package/build/components/Textarea/TextareaField.js

@@ -20,7 +20,7 @@ const styles = StyleSheet.create(theme => ({
         color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
-        fontWeight: theme.typography.mobile.bodyText.fontWeight,
+        fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
         borderWidth: 0,
         outlineWidth: 0,
         _web: {

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -7,7 +7,8 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
     return (_jsx(IconAny, { as: as, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-ignore
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ButtonIcon.displayName = 'ButtonIcon';

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props }) => {
     const { active } = states || {};
-    const { pressed } = useCardActionContext();
+    const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
         active: active || pressed,

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.js

@@ -7,7 +7,8 @@ const UnstyledIconButtonIcon = ({ children, ...props }) => {
     const { active, inverted, size } = useUnstyledIconButtonContext();
     styles.useVariants({ active, inverted, size });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-ignore
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';

package/build/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
+export * from './Banner';
 export * from './BodyText';
 export * from './BottomSheet';
 export * from './Box';
@@ -16,11 +17,14 @@ export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
+export * from './Expandable';
+export * from './ExpandableCard';
 export * from './Flex';
 export * from './FormField';
 export * from './Grid';
 export * from './Heading';
 export * from './Helper';
+export * from './HighlightBanner';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
@@ -44,6 +48,6 @@ export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
 export * from './ToggleButtonCard';
-export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/index.js

@@ -2,6 +2,7 @@
 export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
+export * from './Banner';
 export * from './BodyText';
 export * from './BottomSheet';
 export * from './Box';
@@ -17,11 +18,14 @@ export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
+export * from './Expandable';
+export * from './ExpandableCard';
 export * from './Flex';
 export * from './FormField';
 export * from './Grid';
 export * from './Heading';
 export * from './Helper';
+export * from './HighlightBanner';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
@@ -45,6 +49,6 @@ export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
 export * from './ToggleButtonCard';
-export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/core/index.d.ts

@@ -1,5 +1,5 @@
-export * from './themes';
-export * from './breakpoints';
-export { StyleSheet, UnistylesRuntime, withUnistyles, Hide, Display, ScopedTheme, mq, getServerUnistyles, useUnistyles, hydrateServerUnistyles, useServerUnistyles, resetServerUnistyles, } from 'react-native-unistyles';
+export { createUnistylesElement, Display, getServerUnistyles, Hide, hydrateServerUnistyles, mq, NavigationBar, resetServerUnistyles, ScopedTheme, StatusBar, StyleSheet, UnistylesRuntime, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
 export type { UnistylesBreakpoints, UnistylesThemes, UnistylesVariants, } from 'react-native-unistyles';
+export * from './breakpoints';
+export * from './themes';
 export type * from '../types/unistyles';

package/build/core/index.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { themes } from './themes';
 import { breakpoints } from './breakpoints';
-export * from './themes';
+import { themes } from './themes';
+export { createUnistylesElement, Display, getServerUnistyles, Hide, hydrateServerUnistyles, mq, NavigationBar, resetServerUnistyles, ScopedTheme, StatusBar, StyleSheet, UnistylesRuntime, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
 export * from './breakpoints';
-export { StyleSheet, UnistylesRuntime, withUnistyles, Hide, Display, ScopedTheme, mq, getServerUnistyles, useUnistyles, hydrateServerUnistyles, useServerUnistyles, resetServerUnistyles, } from 'react-native-unistyles';
+export * from './themes';
 StyleSheet.configure({
     breakpoints,
     themes,