@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.12.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

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.12.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

@@ -1,5 +1,27 @@
 # @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
+
+- [#682](https://github.com/utilitywarehouse/hearth/pull/682) [`57d6c71`](https://github.com/utilitywarehouse/hearth/commit/57d6c71baedeaa0bc914ff5163e73bbf4281aa79) Thanks [@Utakato](https://github.com/Utakato)! - Add Verification Input component
+
 ## 0.12.0
 
 ### Minor Changes

package/build/components/Accordion/AccordionTrigger.js

@@ -25,7 +25,7 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

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/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/CheckboxIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.checkbox.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.checkbox.outlineColorActive,
             },

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/DatePicker/DatePickerDay.js

@@ -133,9 +133,9 @@ const styles = StyleSheet.create(theme => ({
             },
         ],
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-visible': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 backgroundColor: theme.color.interactive.functional.surface.subtle.active,
             },

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/PillGroup/Pill.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
 import { usePillGroupContext } from './PillGroup.context';
 const PillRoot = ({ value, label, icon, states = {}, ...props }) => {
     const { active } = states;
@@ -35,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
         },
         variants: {
             active: {

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/RadioIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

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/build/components/RadioCard/RadioCardIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

package/build/components/RadioCard/RadioCardRoot.js

@@ -52,9 +52,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+        // '_focus-visible': {
+        //   ...theme.helpers.focusVisible,
+        // },
         },
     },
 }));

package/build/components/Tabs/Tab.js

@@ -38,11 +38,11 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-                outlineOffset: -2,
-                borderRadius: theme.borderRadius.sm,
-            },
+            // '_focus-visible': {
+            //   ...theme.helpers.focusVisible,
+            //   outlineOffset: -2,
+            //   borderRadius: theme.borderRadius.sm,
+            // },
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -7,7 +7,7 @@ const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props })
     const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
-        active: active || pressed,
+        active,
     });
     const handlePress = (e) => {
         onPress?.(e);
@@ -34,7 +34,7 @@ const styles = StyleSheet.create(theme => ({
         borderColor: theme.color.interactive.neutral.border.subtle,
         height: theme.components.toggleButton.height,
         _web: {
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js

@@ -44,9 +44,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+        // '_focus-visible': {
+        //   ...theme.helpers.focusVisible,
+        // },
         },
     },
     buttonContainer: {