npm - @utilitywarehouse/hearth-react-native - Versions diffs - 0.13.0 → 0.14.0 - Mend

@utilitywarehouse/hearth-react-native 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/.turbo/turbo-build.log CHANGED Viewed

@@ -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.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc

package/.turbo/turbo-lint.log CHANGED Viewed

@@ -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.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 Rule | Time (ms) | Relative

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,21 @@
 # @utilitywarehouse/hearth-react-native
+## 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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/build/components/Checkbox/CheckboxTileRoot.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/build/components/Radio/RadioTileRoot.js CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,8 +56,8 @@
     "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-react-native-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },

package/src/components/BodyText/index.ts CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,
+        },
+      },
     },
   },
 }));

package/src/components/List/List.context.ts CHANGED Viewed

@@ -12,3 +12,7 @@ export const useListContext = () => {
   return context;
 };
+export const ListFirstItemContext = createContext<boolean>(false);
+export const useListFirstItemContext = () => useContext(ListFirstItemContext);

package/src/components/List/List.docs.mdx CHANGED Viewed

@@ -20,10 +20,10 @@ import {
   ListAction,
   ListItem,
   ListItemContent,
+  ListItemHeading,
   ListItemHelperText,
   ListItemIcon,
   ListItemLeadingContent,
-  ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
   SectionHeader,
@@ -105,19 +105,21 @@ const MyComponent = () => (
 ### `ListItem`
-| Name            | Type                     | Default  | Description                                                     |
-| --------------- | ------------------------ | -------- | --------------------------------------------------------------- |
-| heading         | `string`                 |          | The text to display in the list item.                           |
-| onPress         | `() => void`             |          | A callback function to be called when the list item is pressed. |
-| helperText      | `string`                 |          | The supporting text to display in the list item.                |
-| leadingContent  | `ReactNode`              |          | The leading content to display in the list item.                |
-| trailingContent | `ReactNode`              |          | The trailing content to display in the list item.               |
-| variant         | `'subtle' \| 'emphasis'` |          | The variant style of the list item.                             |
-| disabled        | `boolean`                | `false`  | Whether to disable the list item.                               |
-| loading         | `boolean`                | `false`  | Whether to show the list item in loading state.                 |
-| badge           | `ReactNode`              |          | The badge component to display in the list item.                |
-| badgePosition   | `'top' \| 'bottom'`      | `bottom` | Position of the badge in the list item.                         |
-| numericValue    | `string \| number`       |          | A numeric value to display on the right side of the item.       |
+| Name               | Type                     | Default  | Description                                                     |
+| ------------------ | ------------------------ | -------- | --------------------------------------------------------------- |
+| heading            | `string`                 |          | The text to display in the list item.                           |
+| onPress            | `() => void`             |          | A callback function to be called when the list item is pressed. |
+| helperText         | `string`                 |          | The supporting text to display in the list item.                |
+| leadingContent     | `ReactNode`              |          | The leading content to display in the list item.                |
+| trailingContent    | `ReactNode`              |          | The trailing content to display in the list item.               |
+| variant            | `'subtle' \| 'emphasis'` |          | The variant style of the list item.                             |
+| disabled           | `boolean`                | `false`  | Whether to disable the list item.                               |
+| loading            | `boolean`                | `false`  | Whether to show the list item in loading state.                 |
+| badge              | `ReactNode`              |          | The badge component to display in the list item.                |
+| badgePosition      | `'top' \| 'bottom'`      | `bottom` | Position of the badge in the list item.                         |
+| numericValue       | `string \| number`       |          | A numeric value to display on the right side of the item.       |
+| truncateHeading    | `boolean`                | `false`  | Whether to truncate the heading text if it overflows.           |
+| truncateHelperText | `boolean`                | `false`  | Whether to truncate the helper text if it overflows.            |
 ### `ListAction`
@@ -137,10 +139,14 @@ const MyComponent = () => (
 #### - `ListItemContent`
-#### - `ListItemText`
+#### - `ListItemHeading`
+Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
 #### - `ListItemHelperText`
+Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
 #### - `ListItemTrailingContent`
 #### - `ListItemTrailingIcon`
@@ -478,7 +484,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={BillMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Bills</ListItemText>
+        <ListItemHeading>Bills</ListItemHeading>
         <ListItemHelperText>View your bills</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -490,7 +496,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={PaymentMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Payments</ListItemText>
+        <ListItemHeading>Payments</ListItemHeading>
         <ListItemHelperText>Make a payment</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -502,7 +508,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Moving home</ListItemText>
+        <ListItemHeading>Moving home</ListItemHeading>
         <ListItemHelperText>Tell us if your moving</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -514,7 +520,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={UserMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Refer a friend</ListItemText>
+        <ListItemHeading>Refer a friend</ListItemHeading>
         <ListItemHelperText>Get rewarded with a friend</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -532,7 +538,7 @@ import {
   ListItemIcon,
   ListItemLeadingContent,
   ListItemHelperText,
-  ListItemText,
+  ListItemHeading,
   ListItemTrailingContent,
   ListItemTrailingIcon,
   ListItemContent,
@@ -553,7 +559,7 @@ const MyComponent = () => (
         <ListItemIcon as={BillMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Bills</ListItemText>
+        <ListItemHeading>Bills</ListItemHeading>
         <ListItemHelperText>View your bills</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -565,7 +571,7 @@ const MyComponent = () => (
         <ListItemIcon as={PaymentMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Payments</ListItemText>
+        <ListItemHeading>Payments</ListItemHeading>
         <ListItemHelperText>Make a payment</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -577,7 +583,7 @@ const MyComponent = () => (
         <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Moving home</ListItemText>
+        <ListItemHeading>Moving home</ListItemHeading>
         <ListItemHelperText>Tell us if your moving</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -589,7 +595,7 @@ const MyComponent = () => (
         <ListItemIcon as={UserMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Refer a friend</ListItemText>
+        <ListItemHeading>Refer a friend</ListItemHeading>
         <ListItemHelperText>Get rewarded with a friend</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>

package/src/components/List/List.stories.tsx CHANGED Viewed

@@ -212,6 +212,30 @@ export const WithSectionHeader: Story = {
   ),
 };
+const CustomListItem = () => (
+  <ListItem
+    heading="Custom List Item"
+    helperText="This is a custom list item component"
+    leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
+    trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+    onPress={() => console.log('Custom List Item pressed')}
+  />
+);
+export const WithCustomListItemComponent: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List container="subtleWarmWhite">
+      <CustomListItem />
+      <CustomListItem />
+      <CustomListItem />
+      <ListAction heading="Contact support" onPress={() => console.log('Contact pressed')} />
+    </List>
+  ),
+};
 export const WithListAction: Story = {
   parameters: {
     controls: { include: [] },
@@ -219,7 +243,8 @@ export const WithListAction: Story = {
   render: () => (
     <List container="subtleWarmWhite">
       <ListItem
-        heading="Upgrade your plan"
+        heading="Upgrade your plan this is really long text to test wrapping"
+        truncateHeading={true}
         helperText="Get more features with a premium plan"
         onPress={() => console.log('Upgrade pressed')}
       />

package/src/components/List/List.tsx CHANGED Viewed

@@ -3,9 +3,10 @@ import { View, ViewProps } 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 type ListProps from './List.props';
-import { ListItem, ListItemProps } from './ListItem';
+import { ListAction } from './ListAction';
+import { ListItem } from './ListItem';
 const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
   let found = false;
@@ -14,24 +15,30 @@ const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
     return React.Children.map(children, (child: ReactNode): ReactNode => {
       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) {
-        found = true;
-        // Cast the additional prop to match ListItemProps
-        return React.cloneElement(child, { isFirst: true } as Partial<ListItemProps>);
-      }
+      // 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 (
+            <ListFirstItemContext.Provider value={true}>{child}</ListFirstItemContext.Provider>
+          );
+        }
-      // 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 as any).children);
-        return React.cloneElement(child, { children: clonedChildren } as any);
+        // 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 as any).children);
+          return React.cloneElement(child, { children: clonedChildren } as any);
+        }
+        found = true;
+        return <ListFirstItemContext.Provider value={true}>{child}</ListFirstItemContext.Provider>;
       }
       return child;

package/src/components/List/ListAction/ListAction.props.ts CHANGED Viewed

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

package/src/components/List/ListAction/ListAction.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import { createPressable } from '@gluestack-ui/pressable';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useListContext } from '../List.context';
+import { useListContext, useListFirstItemContext } from '../List.context';
 import type ListActionProps from './ListAction.props';
 import ListActionContent from './ListActionContent';
 import ListActionText from './ListActionText';
@@ -17,6 +17,7 @@ const ListActionRoot = ({
 }: ListActionProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
+  const isFirstContext = useListFirstItemContext();
   const { active } = props.states || { active: false };
@@ -40,7 +41,7 @@ const ListActionRoot = ({
     disabled: isDisabled,
     active,
     showDisabled: !listContext?.disabled && disabled,
-    isFirstChild: props.isFirst,
+    isFirstChild: isFirstContext,
     container: listContext?.container,
   });

package/src/components/List/ListItem/ListItem.props.ts CHANGED Viewed

@@ -5,7 +5,6 @@ interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
   loading?: boolean;
   disabled?: boolean;
   variant?: 'subtle' | 'emphasis';
-  isFirst?: boolean;
 }
 export interface ListItemWithChildren extends ListItemBaseProps {
@@ -17,6 +16,8 @@ export interface ListItemWithChildren extends ListItemBaseProps {
   numericValue?: never;
   badge?: never;
   badgePosition?: never;
+  truncateHeading?: never;
+  truncateHelperText?: never;
 }
 export interface ListItemWithoutChildren extends ListItemBaseProps {
@@ -28,6 +29,8 @@ export interface ListItemWithoutChildren extends ListItemBaseProps {
   numericValue?: string | number;
   badge?: ReactNode;
   badgePosition?: 'top' | 'bottom';
+  truncateHeading?: boolean;
+  truncateHelperText?: boolean;
 }
 type ListItemProps = ListItemWithChildren | ListItemWithoutChildren;

package/src/components/List/ListItem/ListItemHeading.tsx ADDED Viewed

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

package/src/components/List/ListItem/ListItemHelperText.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
-import { TextProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
+import { BodyText, BodyTextProps } from '../../BodyText';
-const ListItemHelperText = ({ children, ...props }: TextProps) => {
+const ListItemHelperText = ({ children, ...props }: BodyTextProps) => {
   return (
     <BodyText size="md" {...props} style={[styles.text, props.style]}>
       {children}

package/src/components/List/ListItem/ListItemRoot.tsx CHANGED Viewed

@@ -4,13 +4,13 @@ import { Pressable, ViewStyle } 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 { IListItemContext, ListItemContext } from './ListItem.context';
 import type ListItemProps from './ListItem.props';
 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';
@@ -27,10 +27,13 @@ const ListItemRoot = ({
   badge,
   badgePosition = 'bottom',
   numericValue,
+  truncateHeading = false,
+  truncateHelperText = false,
   ...props
 }: ListItemProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
+  const isFirstContext = useListFirstItemContext();
   const { active } = states || { active: false };
   const getListContainer = (): ListItemProps['variant'] => {
@@ -56,8 +59,8 @@ const ListItemRoot = ({
     showPressed,
     active,
     disabled: isDisabled || isLoading,
-    showDisabled: !listContext?.disabled && disabled,
-    isFirstChild: props.isFirst,
+    showDisabled: !listContext.disabled && disabled,
+    isFirstChild: isFirstContext,
     container: listContext?.container,
   });
@@ -106,8 +109,10 @@ const ListItemRoot = ({
             ) : null}
             <ListItemContent>
               {badgePosition === 'top' && badge ? badge : null}
-              <ListItemText>{heading}</ListItemText>
-              {helperText ? <ListItemHelperText>{helperText}</ListItemHelperText> : null}
+              <ListItemHeading truncated={truncateHeading}>{heading}</ListItemHeading>
+              {helperText ? (
+                <ListItemHelperText truncated={truncateHelperText}>{helperText}</ListItemHelperText>
+              ) : null}
               {badgePosition === 'bottom' && badge ? badge : null}
             </ListItemContent>
             {!!numericValue && <DetailText size="lg">{numericValue}</DetailText>}

package/src/components/List/ListItem/index.ts CHANGED Viewed

@@ -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/src/components/Modal/Modal.docs.mdx CHANGED Viewed

@@ -87,26 +87,29 @@ const MyComponent = () => {
 The Modal component extends the `BottomSheetModal` component and accepts all of its props, plus the following additional props:
-| Property                      | Type                                           | Description                                                                                                   | Default |
-| ----------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------- |
-| `heading`                     | `string`                                       | The heading text displayed at the top of the modal                                                            | -       |
-| `description`                 | `string`                                       | The description text displayed below the heading                                                              | -       |
-| `showCloseButton`             | `boolean`                                      | Whether to show the close button in the top-right corner                                                      | `true`  |
-| `primaryButtonText`           | `string`                                       | Text for the primary action button                                                                            | -       |
-| `secondaryButtonText`         | `string`                                       | Text for the secondary action button                                                                          | -       |
-| `onPressPrimaryButton`        | `() => void`                                   | Callback function called when the primary button is pressed                                                   | -       |
-| `onPressSecondaryButton`      | `() => void`                                   | Callback function called when the secondary button is pressed                                                 | -       |
-| `onPressCloseButton`          | `() => void`                                   | Callback function called when the close button is pressed                                                     | -       |
-| `closeOnPrimaryButtonPress`   | `boolean`                                      | Whether to automatically close the modal when the primary button is pressed                                   | `true`  |
-| `closeOnSecondaryButtonPress` | `boolean`                                      | Whether to automatically close the modal when the secondary button is pressed                                 | `true`  |
-| `loading`                     | `boolean`                                      | Whether to show a loading state with spinner                                                                  | `false` |
-| `image`                       | `ImageProps`                                   | Image to display in the modal (shows as centered content with text below)                                     | -       |
-| `children`                    | `ReactNode`                                    | Custom content to display in the modal body                                                                   | -       |
-| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -       |
-| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -       |
-| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`    | Additional props to pass to the close button                                                                  | -       |
-| `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height                                                       | `false` |
-| `inNavModal`                  | `boolean`                                      | Renders the modal correctly when used inside a navigation modal                                               | `false` |
+| Property                      | Type                                                               | Description                                                                                                   | Default |
+| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ------- |
+| `heading`                     | `string`                                                           | The heading text displayed at the top of the modal                                                            | -       |
+| `description`                 | `string`                                                           | The description text displayed below the heading                                                              | -       |
+| `showCloseButton`             | `boolean`                                                          | Whether to show the close button in the top-right corner                                                      | `true`  |
+| `primaryButtonText`           | `string`                                                           | Text for the primary action button                                                                            | -       |
+| `secondaryButtonText`         | `string`                                                           | Text for the secondary action button                                                                          | -       |
+| `onPressPrimaryButton`        | `() => void`                                                       | Callback function called when the primary button is pressed                                                   | -       |
+| `onPressSecondaryButton`      | `() => void`                                                       | Callback function called when the secondary button is pressed                                                 | -       |
+| `onPressCloseButton`          | `() => void`                                                       | Callback function called when the close button is pressed                                                     | -       |
+| `closeOnPrimaryButtonPress`   | `boolean`                                                          | Whether to automatically close the modal when the primary button is pressed                                   | `true`  |
+| `closeOnSecondaryButtonPress` | `boolean`                                                          | Whether to automatically close the modal when the secondary button is pressed                                 | `true`  |
+| `onChange`                    | `(index: number, position: number, `<br />` type: number) => void` | Callback function called when the modal's position changes \*                                                 | -       |
+| `loading`                     | `boolean`                                                          | Whether to show a loading state with spinner                                                                  | `false` |
+| `image`                       | `ImageProps`                                                       | Image to display in the modal (shows as centered content with text below)                                     | -       |
+| `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                   | -       |
+| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -       |
+| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -       |
+| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -       |
+| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false` |
+| `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false` |
+\* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 ### `ModalImage` Props

package/src/components/Radio/Radio.stories.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
+import { FormField } from '../FormField';
 const meta = {
   title: 'Stories / Radio',
@@ -206,3 +207,26 @@ export const Variants: Story = {
     );
   },
 };
+export const WithFormFieldExample: Story = () => (
+  <>
+    <FormField
+      label="Account type"
+      helperText="Is this account used for personal or business purposes?"
+    >
+      <RadioGroup type="tile">
+        <Radio label="Personal" value="Personal" />
+        <Radio label="Business" value="Business" />
+      </RadioGroup>
+    </FormField>
+    <RadioGroup
+      direction="row"
+      label="Account type"
+      helperText="Is this account used for personal or business purposes?"
+      type="tile"
+    >
+      <Radio label="Personal" value="Personal" />
+      <Radio label="Business" value="Business" />
+    </RadioGroup>
+  </>
+);

package/src/components/Radio/RadioGroup.context.ts CHANGED Viewed

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

package/src/components/Radio/RadioGroup.tsx CHANGED Viewed

@@ -25,8 +25,8 @@ const RadioGroup = ({
   ...props
 }: RadioGroupProps) => {
   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/Radio/RadioTextContent.tsx CHANGED Viewed

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

package/src/components/Radio/RadioTileRoot.tsx CHANGED Viewed

@@ -1,11 +1,14 @@
 import { View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useRadioContext } from './Radio.context';
+import { useRadioGroupContext } from './RadioGroup.context';
 const RadioTileRoot = ({ children }: { children: ViewProps['children'] }) => {
+  const { direction } = useRadioGroupContext();
   const { checked } = useRadioContext();
   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.radio.gap,
     padding: theme.components.radio.tile.padding,
@@ -30,6 +32,12 @@ const styles = StyleSheet.create(theme => ({
           margin: -theme.components.radio.tile.borderWidthSelected / 2,
         },
       },
+      direction: {
+        row: {},
+        column: {
+          flex: 1,
+        },
+      },
     },
   },
 }));

package/build/components/List/ListItem/ListItemText.d.ts DELETED Viewed

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

package/build/components/List/ListItem/ListItemText.js DELETED Viewed

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

package/src/components/List/ListItem/ListItemText.tsx DELETED Viewed

@@ -1,14 +0,0 @@
-import { TextProps } from 'react-native';
-import { BodyText } from '../../BodyText';
-const ListItemText = ({ children, ...props }: TextProps) => {
-  return (
-    <BodyText size="lg" {...props}>
-      {children}
-    </BodyText>
-  );
-};
-ListItemText.displayName = 'ListItemText';
-export default ListItemText;