@utilitywarehouse/hearth-react-native 0.1.0

package/build/components/Link/LinkText.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLinkContext } from './Link.context';
+import { StyleSheet } from 'react-native-unistyles';
+import { DetailText } from '../DetailText';
+const LinkText = ({ children, ...props }) => {
+    const { inverted, disabled, active } = useLinkContext();
+    styles.useVariants({ active, inverted, disabled });
+    return (_jsx(DetailText, { size: "md", ...props, style: [styles.text, props.style], children: children }));
+};
+LinkText.displayName = 'LinkText';
+const styles = StyleSheet.create(theme => ({
+    text: {
+        color: theme.components.link.color,
+        textDecorationStyle: 'solid',
+        textDecorationLine: 'underline',
+        textDecorationColor: theme.components.link.color,
+        _web: {
+            _hover: {
+                textDecorationLine: 'none',
+            },
+        },
+        variants: {
+            active: {
+                true: {
+                    color: theme.components.link.colorActive,
+                },
+            },
+            inverted: {
+                true: {
+                    color: theme.components.link.inverted.color,
+                    textDecorationColor: theme.components.link.inverted.color,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                inverted: true,
+                active: true,
+                styles: {
+                    color: theme.components.link.inverted.colorActive,
+                },
+            },
+        ],
+    },
+}));
+export default LinkText;

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

@@ -0,0 +1,4 @@
+export { default as Link, LinkText } from './Link';
+export { default as LinkIcon } from './LinkIcon';
+export type { LinkProps } from './Link.props';
+export { LinkContext, useLinkContext } from './Link.context';

package/build/components/Link/index.js

@@ -0,0 +1,3 @@
+export { default as Link, LinkText } from './Link';
+export { default as LinkIcon } from './LinkIcon';
+export { LinkContext, useLinkContext } from './Link.context';

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

@@ -0,0 +1,13 @@
+import type ListProps from './List.props';
+export declare const ListContext: import("react").Context<{
+    loading?: ListProps["loading"];
+    disabled?: ListProps["disabled"];
+    divider?: ListProps["divider"];
+    container?: ListProps["container"];
+}>;
+export declare const useListContext: () => {
+    loading?: ListProps["loading"];
+    disabled?: ListProps["disabled"];
+    divider?: ListProps["divider"];
+    container?: ListProps["container"];
+};

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

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const ListContext = createContext({});
+export const useListContext = () => {
+    const context = useContext(ListContext);
+    return context;
+};

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

@@ -0,0 +1,6 @@
+import type ListProps from './List.props';
+declare const List: {
+    ({ children, headingText, headingHelperText, headingLinkText, headingLinkHref, headingLinkOnPress, headingLinkTarget, headingLinkDisabled, headingLinkIcon, headingLinkIconPosition, headingLinkShowIcon, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default List;

package/build/components/List/List.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Card } from '../Card';
+import { ListContext } from './List.context';
+import { ListHeading } from './ListHeading';
+import { ListItem } from './ListItem';
+const markFirstListItem = (children) => {
+    let found = false;
+    const recursiveClone = (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) {
+                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 child;
+        });
+    };
+    return recursiveClone(children);
+};
+const List = ({ children, headingText, headingHelperText, headingLinkText, headingLinkHref, headingLinkOnPress, headingLinkTarget, headingLinkDisabled, headingLinkIcon, headingLinkIconPosition, headingLinkShowIcon, ...props }) => {
+    const { loading, disabled, divider = true, container = 'none' } = props;
+    const containerToCard = {
+        variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
+        colorScheme: container === 'subtleWhite' || container === 'emphasisWhite' ? 'white' : 'warmWhite',
+    };
+    const updatedChildren = markFirstListItem(children);
+    const value = useMemo(() => ({ loading, disabled, divider, container }), [loading, disabled, divider, container]);
+    styles.useVariants({ disabled });
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [headingText ? (_jsx(ListHeading, { text: headingText, helperText: headingHelperText, linkText: headingLinkText, linkHref: headingLinkHref, linkOnPress: headingLinkOnPress, linkTarget: headingLinkTarget, linkDisabled: headingLinkDisabled, linkIcon: headingLinkIcon, linkIconPosition: headingLinkIconPosition, linkShowIcon: headingLinkShowIcon })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
+};
+List.displayName = 'List';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        width: theme.space.full,
+        gap: theme.components.list.gap,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    card: {
+        alignItems: 'stretch',
+    },
+}));
+export default List;

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

@@ -0,0 +1,19 @@
+import type { ViewProps } from 'react-native';
+import { ComponentType } from 'react';
+interface ListProps extends ViewProps {
+    container?: 'none' | 'subtleWhite' | 'emphasisWhite' | 'subtleWarmWhite' | 'emphasisWarmWhite';
+    headingText?: string;
+    headingHelperText?: string;
+    headingLinkText?: string;
+    headingLinkHref?: string;
+    headingLinkOnPress?: () => void;
+    headingLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    headingLinkDisabled?: boolean;
+    headingLinkIcon?: ComponentType;
+    headingLinkIconPosition?: 'left' | 'right';
+    headingLinkShowIcon?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    divider?: boolean;
+}
+export default ListProps;

package/build/components/List/List.props.js

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

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

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

package/build/components/List/ListHeading/ListHeading.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import ListHeadingTitle from './ListHeadingTitle';
+import ListHeadingHelperText from './ListHeadingHelperText';
+import ListHeadingTextContent from './ListHeadingTextContent';
+import { Link } from '../../Link';
+import { useListContext } from '../List.context';
+const ListHeading = ({ text, helperText, children, style, linkDisabled, linkHref, linkIcon, linkIconPosition, linkOnPress, linkShowIcon, linkTarget, linkText, ...props }) => {
+    const { disabled } = useListContext();
+    return (_jsx(View, { ...props, style: [styles.container, style], children: children ? (children) : (_jsxs(_Fragment, { children: [_jsxs(ListHeadingTextContent, { children: [_jsx(ListHeadingTitle, { children: text }), !!helperText && _jsx(ListHeadingHelperText, { children: helperText })] }), !!linkText && (_jsx(Link, { href: linkHref, disabled: disabled ?? linkDisabled, onPress: linkOnPress, icon: linkIcon, showIcon: linkShowIcon, iconPosition: linkIconPosition, target: linkTarget, children: linkText }))] })) }));
+};
+ListHeading.displayName = 'ListHeading';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        gap: theme.components.list.heading.gap,
+    },
+}));
+export default ListHeading;

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

@@ -0,0 +1,33 @@
+import { ComponentType, Ref } from 'react';
+import type { ViewProps, View } from 'react-native';
+interface ListHeadingBaseProps extends Omit<ViewProps, 'children'> {
+    ref?: Ref<View>;
+}
+export interface ListHeadingWithChildren extends ListHeadingBaseProps {
+    children: ViewProps['children'];
+    text?: never;
+    helperText?: never;
+    linkText?: never;
+    linkHref?: never;
+    linkOnPress?: never;
+    linkTarget?: never;
+    linkDisabled?: never;
+    linkIcon?: never;
+    linkIconPosition?: never;
+    linkShowIcon?: never;
+}
+export interface ListHeadingWithoutChildren extends ListHeadingBaseProps {
+    children?: never;
+    text: string;
+    helperText?: string;
+    linkText?: string;
+    linkHref?: string;
+    linkOnPress?: () => void;
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    linkDisabled?: boolean;
+    linkIcon?: ComponentType;
+    linkIconPosition?: 'left' | 'right';
+    linkShowIcon?: boolean;
+}
+type ListHeadingProps = ListHeadingWithChildren | ListHeadingWithoutChildren;
+export default ListHeadingProps;

package/build/components/List/ListHeading/ListHeading.props.js

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

package/build/components/List/ListHeading/ListHeadingHelperText.d.ts

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

package/build/components/List/ListHeading/ListHeadingHelperText.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+const ListHeadingHelperText = ({ children, ...props }) => {
+    return (_jsx(BodyText, { size: "md", ...props, style: [styles.helperText, props.style], children: children }));
+};
+ListHeadingHelperText.displayName = 'ListHeadingHelperText';
+const styles = StyleSheet.create(theme => ({
+    helperText: {
+        color: theme.components.text.colorSecondary,
+    },
+}));
+export default ListHeadingHelperText;

package/build/components/List/ListHeading/ListHeadingTextContent.d.ts

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

package/build/components/List/ListHeading/ListHeadingTextContent.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const ListHeadingTextContent = ({ children, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
+};
+ListHeadingTextContent.displayName = 'ListHeadingTextContent';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.list.heading.textContentGap,
+        flex: 1,
+    },
+}));
+export default ListHeadingTextContent;

package/build/components/List/ListHeading/ListHeadingTitle.d.ts

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

package/build/components/List/ListHeading/ListHeadingTitle.js

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

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

@@ -0,0 +1,4 @@
+export { default as ListHeading } from './ListHeading';
+export { default as ListHeadingTitle } from './ListHeadingTitle';
+export { default as ListHeadingHelperText } from './ListHeadingHelperText';
+export { default as ListHeadingTextContent } from './ListHeadingTextContent';

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

@@ -0,0 +1,4 @@
+export { default as ListHeading } from './ListHeading';
+export { default as ListHeadingTitle } from './ListHeadingTitle';
+export { default as ListHeadingHelperText } from './ListHeadingHelperText';
+export { default as ListHeadingTextContent } from './ListHeadingTextContent';

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

@@ -0,0 +1,7 @@
+import ListItemProps from './ListItem.props';
+export interface IListItemContext extends Pick<ListItemProps, 'divider' | 'loading' | 'disabled'> {
+    showPressed?: boolean;
+    active?: boolean;
+}
+export declare const ListItemContext: import("react").Context<IListItemContext>;
+export declare const useListItemContext: () => IListItemContext;

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

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const ListItemContext = createContext({});
+export const useListItemContext = () => useContext(ListItemContext);

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

@@ -0,0 +1,17 @@
+declare const ListItem: import("react").ForwardRefExoticComponent<(((import("./ListItem.props").default & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+}) & Omit<import("react-native").PressableProps, "children">) & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+}) & import("react").RefAttributes<unknown>>;
+export default ListItem;

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

@@ -0,0 +1,7 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import ListItemRoot from './ListItemRoot';
+const ListItem = createPressable({
+    Root: ListItemRoot,
+});
+ListItem.displayName = 'ListItem';
+export default ListItem;

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

@@ -0,0 +1,26 @@
+import type { PressableProps, ViewProps } from 'react-native';
+import type { ColorValue } from '../../../types';
+interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
+    divider?: boolean;
+    dividerColor?: ColorValue;
+    loading?: boolean;
+    disabled?: boolean;
+    variant?: 'subtle' | 'emphasis';
+    isFirst?: boolean;
+}
+export interface ListItemWithChildren extends ListItemBaseProps {
+    children: ViewProps['children'];
+    text?: never;
+    helperText?: never;
+    leadingContent?: never;
+    trailingContent?: never;
+}
+export interface ListItemWithoutChildren extends ListItemBaseProps {
+    children?: never;
+    text: string;
+    helperText?: string;
+    leadingContent?: ViewProps['children'];
+    trailingContent?: ViewProps['children'];
+}
+type ListItemProps = ListItemWithChildren | ListItemWithoutChildren;
+export default ListItemProps;

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const ListItemContent = ({ children, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
+};
+ListItemContent.displayName = 'ListItemContent';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.list.item.contentGap,
+        flex: 1,
+    },
+}));
+export default ListItemContent;

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+const ListItemHelperText = ({ children, ...props }) => {
+    return (_jsx(BodyText, { size: "md", ...props, style: [styles.text, props.style], children: children }));
+};
+ListItemHelperText.displayName = 'ListItemHelperText';
+const styles = StyleSheet.create(theme => ({
+    text: {
+        color: theme.components.text.colorSecondary,
+    },
+}));
+export default ListItemHelperText;

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

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { IconProps } from '../../Icon';
+declare const ListItemIcon: {
+    ({ children, ...props }: IconProps & {
+        as?: ComponentType;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ListItemIcon;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+const ListItemIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? StyleSheet.compose(styles.icon, props.style)
+            : [styles.icon, props.style], children: children }));
+};
+ListItemIcon.displayName = 'ListItemIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.components.icon.color,
+        width: 24,
+        height: 24,
+    },
+}));
+export default ListItemIcon;

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+const ListItemLeadingContent = ({ children, ...props }) => (_jsx(View, { ...props, children: children }));
+ListItemLeadingContent.displayName = 'ListItemLeadingContent';
+export default ListItemLeadingContent;

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

@@ -0,0 +1,11 @@
+import type ListItemProps from './ListItem.props';
+declare const ListItemRoot: {
+    ({ text, helperText, leadingContent, trailingContent, disabled, divider, loading, children, states, variant, ...props }: ListItemProps & {
+        states?: {
+            active?: boolean;
+            disabled?: boolean;
+        };
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ListItemRoot;

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Skeleton } from '../../Skeleton';
+import { useListContext } from '../List.context';
+import { ListItemContext } from './ListItem.context';
+import ListItemContent from './ListItemContent';
+import ListItemHelperText from './ListItemHelperText';
+import ListItemLeadingContent from './ListItemLeadingContent';
+import ListItemText from './ListItemText';
+import ListItemTrailingContent from './ListItemTrailingContent';
+import ListItemTrailingIcon from './ListItemTrailingIcon';
+const ListItemRoot = ({ text, helperText, leadingContent, trailingContent, disabled, divider, loading, children, states, variant = 'subtle', ...props }) => {
+    const { onPress } = props;
+    const listContext = useListContext();
+    const { active } = states || { active: false };
+    const getListContainer = () => {
+        if (listContext?.container?.includes('subtle')) {
+            return 'subtle';
+        }
+        if (listContext?.container?.includes('emphasis')) {
+            return 'emphasis';
+        }
+        return undefined;
+    };
+    const isLoading = loading || listContext?.loading;
+    const showPressed = isLoading ? false : !!onPress;
+    const showDivider = listContext?.divider ?? divider;
+    const isDisabled = disabled || listContext?.disabled || false;
+    const listItemVariant = getListContainer() || variant;
+    const testID = props.testID || 'list-item';
+    const loadingTestID = isLoading ? `${testID}-loading` : testID;
+    styles.useVariants({
+        divider: showDivider,
+        variant: listItemVariant,
+        showPressed,
+        active,
+        disabled: isDisabled || isLoading,
+        showDisabled: !listContext?.disabled && disabled,
+        isFirstChild: props.isFirst,
+        container: listContext?.container,
+    });
+    const value = useMemo(() => {
+        return {
+            showPressed,
+            divider: showDivider,
+            active,
+            loading: isLoading,
+            disabled: isDisabled,
+        };
+    }, [active, showPressed, showDivider, isLoading, isDisabled]);
+    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, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingContent ? (_jsx(ListItemLeadingContent, { children: leadingContent })) : null, _jsxs(ListItemContent, { children: [_jsx(ListItemText, { children: text }), helperText ? _jsx(ListItemHelperText, { children: helperText }) : null] }), trailingContent ? (_jsx(ListItemTrailingContent, { children: trailingContent })) : onPress ? (_jsx(ListItemTrailingContent, { children: _jsx(ListItemTrailingIcon, { as: ChevronRightSmallIcon }) })) : null] })) }) }));
+};
+ListItemRoot.displayName = 'ListItemRoot';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        paddingVertical: theme.components.list.item.padding,
+        paddingHorizontal: theme.components.list.item.padding,
+        flexDirection: 'row',
+        gap: theme.components.list.item.gap,
+        variants: {
+            divider: {
+                true: {
+                    borderTopWidth: theme.borderWidth['1'],
+                    borderStyle: 'solid',
+                },
+            },
+            isFirstChild: {
+                true: {
+                    borderTopWidth: 0,
+                },
+            },
+            variant: {
+                subtle: {
+                    borderTopColor: theme.components.list.item.subtle.borderColor,
+                },
+                emphasis: {
+                    borderTopColor: theme.components.list.item.emphasis.borderColor,
+                },
+            },
+            disabled: {
+                true: {
+                    cursor: 'auto',
+                },
+            },
+            showDisabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            showPressed: {
+                true: {},
+                false: {
+                    cursor: 'auto',
+                },
+            },
+            active: {
+                true: {},
+            },
+            container: {
+                none: {
+                    paddingHorizontal: 0,
+                },
+                subtleWhite: {},
+                emphasisWhite: {},
+                subtleWarmWhite: {},
+                emphasisWarmWhite: {},
+            },
+        },
+        compoundVariants: [
+            {
+                showPressed: true,
+                active: true,
+                styles: {
+                    backgroundColor: theme.components.list.item.backgroundColorActive,
+                },
+            },
+        ],
+    },
+}));
+export default ListItemRoot;

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,7 @@
+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;