@utilitywarehouse/hearth-react-native 0.13.0 → 0.14.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.13.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.14.1 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.14.1
+
+### Patch Changes
+
+- [#749](https://github.com/utilitywarehouse/hearth/pull/749) [`ded4b2e`](https://github.com/utilitywarehouse/hearth/commit/ded4b2e3dcad9c1cc4860a13120e44a43e5f0dde) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `CardAction` padding
+
+## 0.14.0
+
+### Minor Changes
+
+- [#741](https://github.com/utilitywarehouse/hearth/pull/741) [`acf081a`](https://github.com/utilitywarehouse/hearth/commit/acf081a8e10722ea1e9106f8111f5d9548815646) Thanks [@jordmccord](https://github.com/jordmccord)! - Renames `ListItemText` to `ListItemHeading` (`ListItemText` is deprecated and will be removed in a later release)
+
+### Patch Changes
+
+- [#741](https://github.com/utilitywarehouse/hearth/pull/741) [`acf081a`](https://github.com/utilitywarehouse/hearth/commit/acf081a8e10722ea1e9106f8111f5d9548815646) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `truncateHeading` and `truncateHelperText` props to `ListItem`
+
+- [#740](https://github.com/utilitywarehouse/hearth/pull/740) [`16f1ce0`](https://github.com/utilitywarehouse/hearth/commit/16f1ce073d62c4e72693e7e07233a7498c0d0602) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes custom `ListItem` first child border issue
+
+- [#737](https://github.com/utilitywarehouse/hearth/pull/737) [`85f76db`](https://github.com/utilitywarehouse/hearth/commit/85f76dbbf7c90db96d7e89e5f5e353a772dd84c2) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Radio` and `Checkbox` Groups row direction issue
+
+- [#741](https://github.com/utilitywarehouse/hearth/pull/741) [`acf081a`](https://github.com/utilitywarehouse/hearth/commit/acf081a8e10722ea1e9106f8111f5d9548815646) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `ListItemText` and `ListItemHelperText` prop types
+
 ## 0.13.0
 
 ### Minor Changes

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

@@ -1 +1,2 @@
 export { default as BodyText } from './BodyText';
+export type { default as BodyTextProps } from './BodyText.props';

package/build/components/Card/CardAction/CardActionRoot.js

@@ -120,9 +120,9 @@ const styles = StyleSheet.create(theme => ({
     withIconContainer: {
         alignItems: 'center',
         flexDirection: 'row',
-        paddingVertical: theme.components.list.item.functional.padding,
-        paddingHorizontal: theme.components.list.item.functional.padding,
-        gap: theme.components.list.item.gap,
+        paddingVertical: theme.components.cardAction.content.paddingVertical,
+        paddingHorizontal: theme.components.cardAction.content.paddingHorizontal,
+        gap: theme.components.cardAction.content.gap,
         flex: 1,
         variants: {
             hasIconContainer: {

package/build/components/Checkbox/CheckboxGroup.context.d.ts

@@ -2,9 +2,11 @@ export declare const CheckboxGroupContext: import("react").Context<{
     disabled?: boolean;
     validationStatus?: "valid" | "invalid" | "initial";
     type?: "default" | "tile";
+    direction?: "column" | "row";
 }>;
 export declare const useCheckboxGroupContext: () => {
     disabled?: boolean;
     validationStatus?: "valid" | "invalid" | "initial";
     type?: "default" | "tile";
+    direction?: "column" | "row";
 };

package/build/components/Checkbox/CheckboxGroup.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
-import { CheckboxGroupContext } from './CheckboxGroup.context';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import CheckboxGroupTextContent from './CheckboxGroupTextContent';
-import { Label } from '../Label';
 import { Helper } from '../Helper';
+import { Label } from '../Label';
+import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
+import { CheckboxGroupContext } from './CheckboxGroup.context';
+import CheckboxGroupTextContent from './CheckboxGroupTextContent';
 const CheckboxGroup = ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
-    const value = useMemo(() => ({ disabled, validationStatus, type }), [disabled, validationStatus, type]);
+    const value = useMemo(() => ({ disabled, validationStatus, type, direction }), [disabled, validationStatus, type, direction]);
     const showHeader = !!label || !!helperText || !!invalidText || !!validText;
     const childrenArray = React.Children.toArray(children);
     const childIsCard = type === 'tile' ||

package/build/components/Checkbox/CheckboxTextContent.js

@@ -6,7 +6,6 @@ const CheckboxTextContent = ({ children, style, ...props }) => {
 };
 const styles = StyleSheet.create({
     content: {
-        flex: 1,
         flexShrink: 1,
     },
 });

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -2,10 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useCheckboxContext } from './Checkbox.context';
+import { useCheckboxGroupContext } from './CheckboxGroup.context';
 const CheckboxTileRoot = ({ children }) => {
+    const { direction } = useCheckboxGroupContext();
     const { checked } = useCheckboxContext();
     styles.useVariants({
         checked,
+        direction,
     });
     return _jsx(View, { style: styles.container, children: children });
 };
@@ -13,7 +16,6 @@ const styles = StyleSheet.create(theme => ({
     container: {
         flexDirection: 'row',
         justifyContent: 'flex-start',
-        flex: 1,
         alignSelf: 'stretch',
         gap: theme.components.checkbox.gap,
         padding: theme.components.checkbox.tile.padding,
@@ -29,6 +31,12 @@ const styles = StyleSheet.create(theme => ({
                     margin: -theme.components.checkbox.tile.borderWidthSelected / 2,
                 },
             },
+            direction: {
+                row: {},
+                column: {
+                    flex: 1,
+                },
+            },
         },
     },
 }));

package/build/components/FormField/FormField.d.ts

@@ -1,24 +1,24 @@
 import { View } from 'react-native';
 import FormFieldProps from './FormField.props';
-export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("../BodyText/BodyText.props").default>;
+export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("..").BodyTextProps>;
 export declare const FormFieldLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>> & {
     Text: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 };
 export declare const FormFieldLabelText: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 export declare const FormFieldHelper: import("react").ForwardRefExoticComponent<Omit<import("../Helper/Helper.props").default, "validationStatus"> & import("react").RefAttributes<Omit<import("../Helper/Helper.props").default, "validationStatus">>> & {
-    Text: import("react").ForwardRefExoticComponent<Omit<import("../BodyText/BodyText.props").default, "ref"> & import("react").RefAttributes<import("../BodyText/BodyText.props").default>>;
+    Text: import("react").ForwardRefExoticComponent<Omit<import("..").BodyTextProps, "ref"> & import("react").RefAttributes<import("..").BodyTextProps>>;
 };
-export declare const FormFieldHelperText: import("react").ForwardRefExoticComponent<Omit<import("../BodyText/BodyText.props").default, "ref"> & import("react").RefAttributes<import("../BodyText/BodyText.props").default>>;
+export declare const FormFieldHelperText: import("react").ForwardRefExoticComponent<Omit<import("..").BodyTextProps, "ref"> & import("react").RefAttributes<import("..").BodyTextProps>>;
 export declare const FormFieldHelperIcon: {
     (props: import("..").IconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldValidText: {
-    (props: import("../BodyText/BodyText.props").default): import("react/jsx-runtime").JSX.Element;
+    (props: import("..").BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldInvalidText: {
-    (props: import("../BodyText/BodyText.props").default): import("react/jsx-runtime").JSX.Element;
+    (props: import("..").BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldTextContent: typeof View;

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

@@ -9,3 +9,5 @@ export declare const useListContext: () => {
     disabled?: ListProps["disabled"];
     container?: ListProps["container"];
 };
+export declare const ListFirstItemContext: import("react").Context<boolean>;
+export declare const useListFirstItemContext: () => boolean;

package/build/components/List/List.context.js

@@ -4,3 +4,5 @@ export const useListContext = () => {
     const context = useContext(ListContext);
     return context;
 };
+export const ListFirstItemContext = createContext(false);
+export const useListFirstItemContext = () => useContext(ListFirstItemContext);

package/build/components/List/List.js

@@ -4,7 +4,8 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
-import { ListContext } from './List.context';
+import { ListContext, ListFirstItemContext } from './List.context';
+import { ListAction } from './ListAction';
 import { ListItem } from './ListItem';
 const markFirstListItem = (children) => {
     let found = false;
@@ -12,21 +13,24 @@ const markFirstListItem = (children) => {
         return React.Children.map(children, (child) => {
             if (!React.isValidElement(child))
                 return child;
-            // Check if the current element is the ListItem and hasn't been marked yet
-            if (!found && child.type === ListItem) {
+            // Check if the current element is the ListItem or ListAction and hasn't been marked yet
+            if (!found) {
+                if (child.type === ListItem || child.type === ListAction) {
+                    found = true;
+                    return (_jsx(ListFirstItemContext.Provider, { value: true, children: child }));
+                }
+                // If the child has nested children, process them recursively
+                if (React.isValidElement(child) &&
+                    child.props &&
+                    typeof child.props === 'object' &&
+                    child.props !== null &&
+                    'children' in child.props &&
+                    child.props.children) {
+                    const clonedChildren = recursiveClone(child.props.children);
+                    return React.cloneElement(child, { children: clonedChildren });
+                }
                 found = true;
-                // Cast the additional prop to match ListItemProps
-                return React.cloneElement(child, { isFirst: true });
-            }
-            // If the child has nested children, process them recursively
-            if (React.isValidElement(child) &&
-                child.props &&
-                typeof child.props === 'object' &&
-                child.props !== null &&
-                'children' in child.props &&
-                child.props.children) {
-                const clonedChildren = recursiveClone(child.props.children);
-                return React.cloneElement(child, { children: clonedChildren });
+                return _jsx(ListFirstItemContext.Provider, { value: true, children: child });
             }
             return child;
         });

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

@@ -3,7 +3,7 @@ import { createPressable } from '@gluestack-ui/pressable';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useListContext } from '../List.context';
+import { useListContext, useListFirstItemContext } from '../List.context';
 import ListActionContent from './ListActionContent';
 import ListActionText from './ListActionText';
 import ListActionTrailingContent from './ListActionTrailingContent';
@@ -11,6 +11,7 @@ import ListActionTrailingIcon from './ListActionTrailingIcon';
 const ListActionRoot = ({ heading, disabled, variant = 'subtle', ...props }) => {
     const { onPress } = props;
     const listContext = useListContext();
+    const isFirstContext = useListFirstItemContext();
     const { active } = props.states || { active: false };
     const getListContainer = () => {
         if (listContext?.container?.includes('subtle')) {
@@ -29,7 +30,7 @@ const ListActionRoot = ({ heading, disabled, variant = 'subtle', ...props }) =>
         disabled: isDisabled,
         active,
         showDisabled: !listContext?.disabled && disabled,
-        isFirstChild: props.isFirst,
+        isFirstChild: isFirstContext,
         container: listContext?.container,
     });
     return (_jsxs(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled || !onPress, children: [_jsx(ListActionContent, { children: _jsx(ListActionText, { children: heading }) }), _jsx(ListActionTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListActionTrailingIcon, { as: ChevronRightSmallIcon }) })] }));

package/build/components/List/ListAction/ListAction.props.d.ts

@@ -3,6 +3,5 @@ interface ListActionProps extends Omit<PressableProps, 'children'> {
     heading: string;
     disabled?: boolean;
     variant?: 'subtle' | 'emphasis';
-    isFirst?: boolean;
 }
 export default ListActionProps;

package/build/components/List/ListItem/ListItem.props.d.ts

@@ -4,7 +4,6 @@ interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
     loading?: boolean;
     disabled?: boolean;
     variant?: 'subtle' | 'emphasis';
-    isFirst?: boolean;
 }
 export interface ListItemWithChildren extends ListItemBaseProps {
     children: ViewProps['children'];
@@ -15,6 +14,8 @@ export interface ListItemWithChildren extends ListItemBaseProps {
     numericValue?: never;
     badge?: never;
     badgePosition?: never;
+    truncateHeading?: never;
+    truncateHelperText?: never;
 }
 export interface ListItemWithoutChildren extends ListItemBaseProps {
     children?: never;
@@ -25,6 +26,8 @@ export interface ListItemWithoutChildren extends ListItemBaseProps {
     numericValue?: string | number;
     badge?: ReactNode;
     badgePosition?: 'top' | 'bottom';
+    truncateHeading?: boolean;
+    truncateHelperText?: boolean;
 }
 type ListItemProps = ListItemWithChildren | ListItemWithoutChildren;
 export default ListItemProps;

package/build/components/List/ListItem/ListItemHeading.d.ts

@@ -0,0 +1,13 @@
+import { BodyTextProps } from '../../BodyText';
+declare const ListItemHeading: {
+    ({ children, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * @deprecated Use `ListItemHeading` instead.
+ */
+export declare const ListItemText: {
+    ({ children, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ListItemHeading;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BodyText } from '../../BodyText';
+const ListItemHeading = ({ children, ...props }) => {
+    return (_jsx(BodyText, { size: "lg", ...props, children: children }));
+};
+ListItemHeading.displayName = 'ListItemHeading';
+/**
+ * @deprecated Use `ListItemHeading` instead.
+ */
+export const ListItemText = ListItemHeading;
+ListItemText.displayName = 'ListItemText';
+export default ListItemHeading;

package/build/components/List/ListItem/ListItemHelperText.d.ts

@@ -1,6 +1,6 @@
-import { TextProps } from 'react-native';
+import { BodyTextProps } from '../../BodyText';
 declare const ListItemHelperText: {
-    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ListItemHelperText;

package/build/components/List/ListItem/ListItemRoot.d.ts

@@ -1,6 +1,6 @@
 import type ListItemProps from './ListItem.props';
 declare const ListItemRoot: {
-    ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant, badge, badgePosition, numericValue, ...props }: ListItemProps & {
+    ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant, badge, badgePosition, numericValue, truncateHeading, truncateHelperText, ...props }: ListItemProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

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

@@ -5,17 +5,18 @@ import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
-import { useListContext } from '../List.context';
+import { useListContext, useListFirstItemContext } from '../List.context';
 import { ListItemContext } from './ListItem.context';
 import ListItemContent from './ListItemContent';
+import ListItemHeading from './ListItemHeading';
 import ListItemHelperText from './ListItemHelperText';
 import ListItemLeadingContent from './ListItemLeadingContent';
-import ListItemText from './ListItemText';
 import ListItemTrailingContent from './ListItemTrailingContent';
 import ListItemTrailingIcon from './ListItemTrailingIcon';
-const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant = 'subtle', badge, badgePosition = 'bottom', numericValue, ...props }) => {
+const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant = 'subtle', badge, badgePosition = 'bottom', numericValue, truncateHeading = false, truncateHelperText = false, ...props }) => {
     const { onPress } = props;
     const listContext = useListContext();
+    const isFirstContext = useListFirstItemContext();
     const { active } = states || { active: false };
     const getListContainer = () => {
         if (listContext?.container?.includes('subtle')) {
@@ -37,8 +38,8 @@ const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, di
         showPressed,
         active,
         disabled: isDisabled || isLoading,
-        showDisabled: !listContext?.disabled && disabled,
-        isFirstChild: props.isFirst,
+        showDisabled: !listContext.disabled && disabled,
+        isFirstChild: isFirstContext,
         container: listContext?.container,
     });
     const value = useMemo(() => {
@@ -52,7 +53,7 @@ const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, di
     if (loading || listContext?.loading) {
         return (_jsxs(Pressable, { ...props, testID: loadingTestID, style: [styles.container, props.style], disabled: isDisabled, children: [leadingContent ? _jsx(Skeleton, { width: 24, height: 24 }) : null, _jsxs(ListItemContent, { children: [_jsx(Skeleton, { width: "80%", height: 20 }), _jsx(Skeleton, { width: "100%", height: 16 })] }), onPress || trailingContent ? _jsx(Skeleton, { width: 24, height: 24 }) : null] }));
     }
-    return (_jsx(ListItemContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingContent ? (_jsx(ListItemLeadingContent, { children: leadingContent })) : null, _jsxs(ListItemContent, { children: [badgePosition === 'top' && badge ? badge : null, _jsx(ListItemText, { children: heading }), helperText ? _jsx(ListItemHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? badge : null] }), !!numericValue && _jsx(DetailText, { size: "lg", children: numericValue }), trailingContent ? (_jsx(ListItemTrailingContent, { children: trailingContent })) : onPress ? (_jsx(ListItemTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListItemTrailingIcon, { as: ChevronRightSmallIcon }) })) : null] })) }) }));
+    return (_jsx(ListItemContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingContent ? (_jsx(ListItemLeadingContent, { children: leadingContent })) : null, _jsxs(ListItemContent, { children: [badgePosition === 'top' && badge ? badge : null, _jsx(ListItemHeading, { truncated: truncateHeading, children: heading }), helperText ? (_jsx(ListItemHelperText, { truncated: truncateHelperText, children: helperText })) : null, badgePosition === 'bottom' && badge ? badge : null] }), !!numericValue && _jsx(DetailText, { size: "lg", children: numericValue }), trailingContent ? (_jsx(ListItemTrailingContent, { children: trailingContent })) : onPress ? (_jsx(ListItemTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListItemTrailingIcon, { as: ChevronRightSmallIcon }) })) : null] })) }) }));
 };
 ListItemRoot.displayName = 'ListItemRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/List/ListItem/index.d.ts

@@ -1,9 +1,9 @@
 export { default as ListItem } from './ListItem';
 export type { default as ListItemProps } from './ListItem.props';
 export { default as ListItemContent } from './ListItemContent';
+export { default as ListItemHeading, ListItemText } from './ListItemHeading';
 export { default as ListItemHelperText } from './ListItemHelperText';
 export { default as ListItemIcon } from './ListItemIcon';
 export { default as ListItemLeadingContent } from './ListItemLeadingContent';
-export { default as ListItemText } from './ListItemText';
 export { default as ListItemTrailingContent } from './ListItemTrailingContent';
 export { default as ListItemTrailingIcon } from './ListItemTrailingIcon';

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

@@ -1,8 +1,8 @@
 export { default as ListItem } from './ListItem';
 export { default as ListItemContent } from './ListItemContent';
+export { default as ListItemHeading, ListItemText } from './ListItemHeading';
 export { default as ListItemHelperText } from './ListItemHelperText';
 export { default as ListItemIcon } from './ListItemIcon';
 export { default as ListItemLeadingContent } from './ListItemLeadingContent';
-export { default as ListItemText } from './ListItemText';
 export { default as ListItemTrailingContent } from './ListItemTrailingContent';
 export { default as ListItemTrailingIcon } from './ListItemTrailingIcon';

package/build/components/Radio/RadioGroup.context.d.ts

@@ -2,9 +2,11 @@ export declare const RadioGroupContext: import("react").Context<{
     disabled?: boolean;
     validationStatus?: "valid" | "invalid" | "initial";
     type?: "default" | "tile";
+    direction?: "column" | "row";
 }>;
 export declare const useRadioGroupContext: () => {
     disabled?: boolean;
     validationStatus?: "valid" | "invalid" | "initial";
     type?: "default" | "tile";
+    direction?: "column" | "row";
 };

package/build/components/Radio/RadioGroup.js

@@ -8,7 +8,7 @@ import { RadioGroup as RadioGroupComponent } from './Radio';
 import { RadioGroupContext } from './RadioGroup.context';
 import RadioGroupTextContent from './RadioGroupTextContent';
 const RadioGroup = ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
-    const value = useMemo(() => ({ disabled, validationStatus, type }), [disabled, validationStatus, type]);
+    const value = useMemo(() => ({ disabled, validationStatus, type, direction }), [disabled, validationStatus, type, direction]);
     const showHeader = !!label || !!helperText || !!invalidText || !!validText;
     const childrenArray = React.Children.toArray(children);
     const childIsCard = type === 'tile' ||

package/build/components/Radio/RadioTextContent.js

@@ -6,7 +6,6 @@ const RadioTextContent = ({ children, style, ...props }) => {
 };
 const styles = StyleSheet.create({
     content: {
-        flex: 1,
         flexShrink: 1,
     },
 });

package/build/components/Radio/RadioTileRoot.js

@@ -2,10 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useRadioContext } from './Radio.context';
+import { useRadioGroupContext } from './RadioGroup.context';
 const RadioTileRoot = ({ children }) => {
+    const { direction } = useRadioGroupContext();
     const { checked } = useRadioContext();
     styles.useVariants({
         checked,
+        direction,
     });
     return _jsx(View, { style: styles.container, children: children });
 };
@@ -13,7 +16,6 @@ const styles = StyleSheet.create(theme => ({
     container: {
         flexDirection: 'row',
         justifyContent: 'flex-start',
-        flex: 1,
         alignSelf: 'stretch',
         gap: theme.components.radio.gap,
         padding: theme.components.radio.tile.padding,
@@ -29,6 +31,12 @@ const styles = StyleSheet.create(theme => ({
                     margin: -theme.components.radio.tile.borderWidthSelected / 2,
                 },
             },
+            direction: {
+                row: {},
+                column: {
+                    flex: 1,
+                },
+            },
         },
     },
 }));

package/docs/introduction.mdx

@@ -212,6 +212,16 @@ StyleSheet.configure({
   breakpoints,
 });
 
+// For some reason react-native-reanimated's default mock doesn't mock useReducedMotion, so we need to override it here
+// as we use that method in our components.
+jest.mock('react-native-reanimated', () => {
+  return {
+    ...jest.requireActual('react-native-reanimated/mock'),
+    useReducedMotion: () => {}, // Add this line
+  };
+});
+require('react-native-reanimated').setUpTests();
+
 // rest of your setup...
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,9 +56,9 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-icons": "^0.7.4",
-    "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },
   "peerDependencies": {

package/src/components/BodyText/index.ts

@@ -1 +1,2 @@
 export { default as BodyText } from './BodyText';
+export type { default as BodyTextProps } from './BodyText.props';

package/src/components/Card/CardAction/CardActionRoot.tsx

@@ -222,9 +222,9 @@ const styles = StyleSheet.create(theme => ({
   withIconContainer: {
     alignItems: 'center',
     flexDirection: 'row',
-    paddingVertical: theme.components.list.item.functional.padding,
-    paddingHorizontal: theme.components.list.item.functional.padding,
-    gap: theme.components.list.item.gap,
+    paddingVertical: theme.components.cardAction.content.paddingVertical,
+    paddingHorizontal: theme.components.cardAction.content.paddingHorizontal,
+    gap: theme.components.cardAction.content.gap,
     flex: 1,
     variants: {
       hasIconContainer: {

package/src/components/Checkbox/CheckboxGroup.context.ts

@@ -4,6 +4,7 @@ export const CheckboxGroupContext = createContext<{
   disabled?: boolean;
   validationStatus?: 'valid' | 'invalid' | 'initial';
   type?: 'default' | 'tile';
+  direction?: 'column' | 'row';
 }>({});
 
 export const useCheckboxGroupContext = () => useContext(CheckboxGroupContext);

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,13 +1,12 @@
- 
 import React, { useMemo } from 'react';
-import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
-import CheckboxGroupProps from './CheckboxGroup.props';
-import { CheckboxGroupContext } from './CheckboxGroup.context';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import CheckboxGroupTextContent from './CheckboxGroupTextContent';
-import { Label } from '../Label';
 import { Helper } from '../Helper';
+import { Label } from '../Label';
+import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
+import { CheckboxGroupContext } from './CheckboxGroup.context';
+import CheckboxGroupProps from './CheckboxGroup.props';
+import CheckboxGroupTextContent from './CheckboxGroupTextContent';
 
 const CheckboxGroup = ({
   children,
@@ -26,8 +25,8 @@ const CheckboxGroup = ({
   ...props
 }: CheckboxGroupProps) => {
   const value = useMemo(
-    () => ({ disabled, validationStatus, type }),
-    [disabled, validationStatus, type]
+    () => ({ disabled, validationStatus, type, direction }),
+    [disabled, validationStatus, type, direction]
   );
   const showHeader = !!label || !!helperText || !!invalidText || !!validText;
   const childrenArray = React.Children.toArray(children as any);

package/src/components/Checkbox/CheckboxTextContent.tsx

@@ -12,7 +12,6 @@ const CheckboxTextContent = ({ children, style, ...props }: FlexProps) => {
 
 const styles = StyleSheet.create({
   content: {
-    flex: 1,
     flexShrink: 1,
   },
 });

package/src/components/Checkbox/CheckboxTileRoot.tsx

@@ -1,11 +1,14 @@
 import { View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useCheckboxContext } from './Checkbox.context';
+import { useCheckboxGroupContext } from './CheckboxGroup.context';
 
 const CheckboxTileRoot = ({ children }: { children: ViewProps['children'] }) => {
+  const { direction } = useCheckboxGroupContext();
   const { checked } = useCheckboxContext();
   styles.useVariants({
     checked,
+    direction,
   });
   return <View style={styles.container}>{children}</View>;
 };
@@ -14,7 +17,6 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    flex: 1,
     alignSelf: 'stretch',
     gap: theme.components.checkbox.gap,
     padding: theme.components.checkbox.tile.padding,
@@ -30,6 +32,12 @@ const styles = StyleSheet.create(theme => ({
           margin: -theme.components.checkbox.tile.borderWidthSelected / 2,
         },
       },
+      direction: {
+        row: {},
+        column: {
+          flex: 1,
+        },
+      },
     },
   },
 }));