@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.2.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.3.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.2.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.3.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.3.0
+
+### Minor Changes
+
+- [`ce2b445`](https://github.com/utilitywarehouse/hearth/commit/ce2b445dfdd11a2912b4328d8259a604a77b31cd) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `IconContainer` component
+
+- [#423](https://github.com/utilitywarehouse/hearth/pull/423) [`af2deea`](https://github.com/utilitywarehouse/hearth/commit/af2deea62be55d6e40fe5bbb41700e054082b583) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `DescriptionList` component
+
+- [#421](https://github.com/utilitywarehouse/hearth/pull/421) [`a7974df`](https://github.com/utilitywarehouse/hearth/commit/a7974df554cb0eb499923a140ebea523fa49761c) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Removes `date` and `currency` type from the `Input` component
+
+- [#426](https://github.com/utilitywarehouse/hearth/pull/426) [`997e7cb`](https://github.com/utilitywarehouse/hearth/commit/997e7cb847e4f70de7b995c00aeeee18f1a0a1cd) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Adds updated `Badge` colour schemes and variants, replaces `solid` with `emphasis`
+
+- [#429](https://github.com/utilitywarehouse/hearth/pull/429) [`1a818ff`](https://github.com/utilitywarehouse/hearth/commit/1a818ffc97a04f412deac4e892fc2400b8ad8735) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Tabs` component
+
+- [#421](https://github.com/utilitywarehouse/hearth/pull/421) [`a7974df`](https://github.com/utilitywarehouse/hearth/commit/a7974df554cb0eb499923a140ebea523fa49761c) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `CurrencyInput` component
+
+### Patch Changes
+
+- [#430](https://github.com/utilitywarehouse/hearth/pull/430) [`a151f3a`](https://github.com/utilitywarehouse/hearth/commit/a151f3a116b97ce2756b89c07f2ac3f3105c3ff7) Thanks [@jordmccord](https://github.com/jordmccord)! - Added `autoFormatThousands` prop to `CurrencyInput` component
+
+- [#426](https://github.com/utilitywarehouse/hearth/pull/426) [`997e7cb`](https://github.com/utilitywarehouse/hearth/commit/997e7cb847e4f70de7b995c00aeeee18f1a0a1cd) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds 2 new layout spacing sizes, '2xs' and '2xl'
+
 ## 0.2.0
 
 ### Minor Changes

package/build/components/Badge/Badge.js

@@ -6,7 +6,7 @@ import { BadgeContext } from './Badge.context';
 import BadgeIcon from './BadgeIcon';
 import BadgeText from './BadgeText';
 const Badge = ({ children, ...props }) => {
-    const { variant = 'solid', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, ...rest } = props;
+    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, size });
@@ -34,9 +34,11 @@ const styles = StyleSheet.create(theme => ({
                 insurance: {},
                 cashback: {},
                 pig: {},
+                highlight: {},
             },
             variant: {
-                solid: {},
+                subtle: {},
+                emphasis: {},
                 outline: {
                     borderWidth: theme.components.badge.outline.borderWidth,
                     borderColor: theme.color.border.subtle,
@@ -61,84 +63,169 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
-            // Solid
+            // Emphasis
             {
                 colorScheme: 'info',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.info.surface.default,
                 },
             },
             {
                 colorScheme: 'danger',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.danger.surface.default,
                 },
             },
             {
                 colorScheme: 'positive',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.positive.surface.default,
                 },
             },
             {
                 colorScheme: 'warning',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.warning.surface.default,
                 },
             },
             {
                 colorScheme: 'functional',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.feedback.functional.surface.default,
                 },
             },
             {
                 colorScheme: 'energy',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.energy.default,
                 },
             },
             {
                 colorScheme: 'broadband',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.broadband.default,
                 },
             },
             {
                 colorScheme: 'mobile',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.mobile.default,
                 },
             },
             {
                 colorScheme: 'insurance',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.insurance.default,
                 },
             },
             {
                 colorScheme: 'cashback',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     backgroundColor: theme.color.surface.cashback.default,
                 },
             },
             {
                 colorScheme: 'pig',
-                variant: 'solid',
+                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: 'mobile',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                },
+            },
+            {
+                colorScheme: 'insurance',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                },
+            },
+            {
+                colorScheme: 'cashback',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                },
+            },
+            {
+                colorScheme: 'pig',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.pig.subtle,
+                },
+            },
+            {
+                colorScheme: 'highlight',
+                variant: 'subtle',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.subtle,
+                },
+            },
             // Outline
             {
                 colorScheme: 'info',

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

@@ -1,8 +1,8 @@
 import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 interface BadgeProps extends ViewProps {
-    variant?: 'solid' | 'outline';
-    colorScheme?: 'info' | 'positive' | 'danger' | 'warning' | 'functional' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    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

@@ -27,93 +27,19 @@ const styles = StyleSheet.create(theme => ({
                 insurance: {},
                 cashback: {},
                 pig: {},
+                highlight: {},
             },
             variant: {
-                solid: {
+                emphasis: {
+                    color: theme.color.text.primary,
+                },
+                subtle: {
                     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: 'info',

package/build/components/Badge/BadgeText.js

@@ -3,9 +3,9 @@ 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: "md", weight: "semibold", 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 => ({
@@ -23,93 +23,19 @@ const styles = StyleSheet.create(theme => ({
                 insurance: {},
                 cashback: {},
                 pig: {},
+                highlight: {},
             },
             variant: {
-                solid: {
+                emphasis: {
+                    color: theme.color.text.primary,
+                },
+                subtle: {
                     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.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',

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/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;
 };

package/build/components/Button/ButtonGroupRoot.js

@@ -24,6 +24,12 @@ const styles = StyleSheet.create(theme => ({
     text: {
         variants: {
             space: {
+                none: {
+                    gap: theme.layout.mobile.spacing.none,
+                },
+                '2xs': {
+                    gap: theme.layout.mobile.spacing['2xs'],
+                },
                 xs: {
                     gap: theme.layout.mobile.spacing.xs,
                 },
@@ -39,6 +45,9 @@ const styles = StyleSheet.create(theme => ({
                 xl: {
                     gap: theme.layout.mobile.spacing.xl,
                 },
+                '2xl': {
+                    gap: theme.layout.mobile.spacing['2xl'],
+                },
             },
             attached: {
                 true: {

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

@@ -1,11 +1,11 @@
 import { PressableProps, ViewStyle } from 'react-native';
-import { SpaceValue } from '../../types';
+import { SpaceValue, SpacingValues } from '../../types';
 interface CardProps extends PressableProps {
     variant?: 'emphasis' | 'subtle';
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
     alignItems?: ViewStyle['alignItems'];
     justifyContent?: ViewStyle['justifyContent'];
     flexDirection?: ViewStyle['flexDirection'];

package/build/components/CurrencyInput/CurrencyInput.d.ts

@@ -0,0 +1,6 @@
+import type CurrencyInputProps from './CurrencyInput.props';
+declare const CurrencyInput: {
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, autoFormatThousands, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { formatThousands } from '../../utils';
+import { DetailText } from '../DetailText';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, autoFormatThousands = false, value, onChangeText, ...rest }) => {
+    const formFieldContext = useFormFieldContext();
+    const { disabled: formFieldDisabled } = formFieldContext;
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const defaultFormat = '0.00';
+    const getPlaceholder = placeholder ?? defaultFormat;
+    const handleChangeText = (text) => {
+        if (autoFormatThousands) {
+            const formatted = formatThousands(text);
+            onChangeText?.(formatted);
+        }
+        else {
+            onChangeText?.(text);
+        }
+    };
+    const displayValue = autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+};
+CurrencyInput.displayName = 'CurrencyInput';
+const styles = StyleSheet.create(theme => ({
+    wrap: {
+        height: theme.components.input.currency.height,
+        gap: theme.components.input.currency.gap,
+    },
+    text: {
+        ...(Platform.OS === 'ios' && { lineHeight: 46 }),
+        _web: {
+            marginTop: 1,
+        },
+    },
+    input: {
+        fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
+        fontFamily: theme.typography.mobile.detailText.fontFamily,
+        fontWeight: theme.typography.mobile.detailText.fontWeight,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+    },
+}));
+export default CurrencyInput;

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

@@ -0,0 +1,14 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+export interface CurrencyInputBaseProps {
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
+    autoFormatThousands?: boolean;
+}
+export type CurrencyInputProps = CurrencyInputBaseProps & Omit<TextInputProps, 'children'> & ViewProps;
+export default CurrencyInputProps;

package/build/components/CurrencyInput/CurrencyInput.props.js

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

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

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

package/build/components/CurrencyInput/index.js

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

package/build/components/DescriptionList/DescriptionList.context.d.ts

@@ -0,0 +1,6 @@
+export interface DescriptionListContextValue {
+    direction: 'row' | 'column';
+    itemHeadingWidth?: number;
+}
+export declare const DescriptionListContext: import("react").Context<DescriptionListContextValue | undefined>;
+export declare const useDescriptionListContext: () => DescriptionListContextValue;

package/build/components/DescriptionList/DescriptionList.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const DescriptionListContext = createContext(undefined);
+export const useDescriptionListContext = () => {
+    const ctx = useContext(DescriptionListContext);
+    if (!ctx) {
+        throw new Error('DescriptionListItem must be used within a DescriptionList');
+    }
+    return ctx;
+};

package/build/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,6 @@
+import type DescriptionListProps from './DescriptionList.props';
+declare const DescriptionList: {
+    ({ direction, itemHeadingWidth, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, children, style, ...props }: DescriptionListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DescriptionList;