@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

package/build/components/Carousel/CarouselControls.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { nanoid } from 'nanoid/non-secure';
+import { useContext, useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+import { ChevronLeftSmallIcon, ChevronRightSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import CarouselContext from './Carousel.context';
+import CarouselControlItem from './CarouselControlItem';
+export const CarouselControls = ({ testID = 'pagination', style, itemStyle, activeItemStyle, showNavigation = false, onPressPrev, onPressNext, accessibilityHidden, ...props }) => {
+    const context = useContext(CarouselContext);
+    const { activeIndex = 0, numItems = 0, setActiveIndex, controlsAccessibilityHidden, disabled = false, } = context;
+    const isAccessibilityHidden = accessibilityHidden ?? controlsAccessibilityHidden ?? true;
+    styles.useVariants({ showNavigation });
+    useEffect(() => {
+        if (!Object.keys(context).length) {
+            console.warn('CarouselControls must be a child of Carousel. Pagination will not be displayed.');
+        }
+    }, [context]);
+    const keys = useMemo(() => {
+        return Array(numItems)
+            .fill(null)
+            .map(() => nanoid());
+    }, [numItems]);
+    const handlePrev = () => {
+        if (activeIndex > 0) {
+            setActiveIndex(activeIndex - 1);
+            onPressPrev?.();
+        }
+    };
+    const handleNext = () => {
+        if (activeIndex < numItems - 1) {
+            setActiveIndex(activeIndex + 1);
+            onPressNext?.();
+        }
+    };
+    const handleItemPress = (index) => {
+        setActiveIndex(index);
+    };
+    if (!Object.keys(context).length) {
+        return null;
+    }
+    return (_jsxs(View, { style: [styles.root, style], testID: testID, importantForAccessibility: isAccessibilityHidden ? 'no-hide-descendants' : 'auto', accessibilityElementsHidden: isAccessibilityHidden, ...props, children: [showNavigation && (_jsx(UnstyledIconButton, { icon: ChevronLeftSmallIcon, onPress: handlePrev, disabled: disabled || activeIndex === 0, accessibilityLabel: "Previous", style: styles.button, inverted: context.inverted })), _jsx(View, { style: styles.dotsContainer, children: keys.map((_, index) => (_jsx(CarouselControlItem, { active: index === activeIndex, index: index, style: itemStyle, activeStyle: activeItemStyle, onPress: () => handleItemPress(index), disabled: disabled }, keys[index]))) }), showNavigation && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, onPress: handleNext, disabled: disabled || activeIndex === numItems - 1, accessibilityLabel: "Next", style: styles.button, inverted: context.inverted }))] }));
+};
+const styles = StyleSheet.create(theme => ({
+    root: {
+        width: '100%',
+        alignSelf: 'center',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.carouselControl.gap,
+        justifyContent: 'space-between',
+        variants: {
+            showNavigation: {
+                true: {
+                    justifyContent: 'space-between',
+                },
+                false: {
+                    justifyContent: 'center',
+                },
+            },
+        },
+    },
+    dotsContainer: {
+        flexDirection: 'row',
+        gap: theme.components.carouselControl.gap,
+    },
+    button: {
+        width: 24,
+        height: 24,
+    },
+}));
+CarouselControls.displayName = 'CarouselControls';
+export default CarouselControls;

package/build/components/Carousel/CarouselItem.d.ts

@@ -0,0 +1,6 @@
+import { CarouselItemProps } from './Carousel.props';
+export declare const CarouselItem: {
+    ({ active, children, inactiveOpacity, style, width, ...props }: CarouselItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CarouselItem;

package/build/components/Carousel/CarouselItem.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+export const CarouselItem = ({ active, children, inactiveOpacity = 1, style, width, ...props }) => {
+    const isWeb = Platform.OS === 'web';
+    const opacity = useSharedValue(inactiveOpacity);
+    const animatedStyles = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        width,
+    }), [opacity, width]);
+    useEffect(() => {
+        opacity.value = withTiming(active ? 1 : inactiveOpacity, { duration: 200 });
+    }, [active, inactiveOpacity, opacity]);
+    // For web, use a regular View with CSS transitions
+    if (isWeb) {
+        return (_jsx(View, { style: [
+                styles.container,
+                style,
+                {
+                    opacity: active ? 1 : inactiveOpacity,
+                    width,
+                },
+            ], ...props, children: children }));
+    }
+    // For native, use Animated.View with reanimated
+    return (_jsx(Animated.View, { style: [styles.container, style, animatedStyles], ...props, children: children }));
+};
+CarouselItem.displayName = 'CarouselItem';
+const styles = StyleSheet.create(() => ({
+    container: {
+        _web: {
+            transition: 'opacity 200ms ease-in-out',
+        },
+    },
+}));
+export default CarouselItem;

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

@@ -0,0 +1,5 @@
+export * from './Carousel';
+export * from './Carousel.props';
+export * from './CarouselControls';
+export * from './CarouselItem';
+export { default as Carousel } from './Carousel';

package/build/components/Carousel/index.js

@@ -0,0 +1,5 @@
+export * from './Carousel';
+export * from './Carousel.props';
+export * from './CarouselControls';
+export * from './CarouselItem';
+export { default as Carousel } from './Carousel';

package/build/components/Checkbox/CheckboxTextContent.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from '../Flex/Flex.props';
 declare const CheckboxTextContent: {
-    ({ children, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CheckboxTextContent;

package/build/components/Checkbox/CheckboxTextContent.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
-const CheckboxTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+const CheckboxTextContent = ({ children, style, ...props }) => {
+    return (_jsx(Flex, { style: [styles.content, style], direction: "column", space: "none", ...props, children: children }));
 };
+const styles = StyleSheet.create({
+    content: {
+        flex: 1,
+        flexShrink: 1,
+    },
+});
 CheckboxTextContent.displayName = 'CheckboxTextContent';
 export default CheckboxTextContent;

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

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

package/build/components/CurrencyInput/CurrencyInput.js

@@ -5,14 +5,14 @@ import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
-const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, autoFormatThousands = false, value, onChangeText, ...rest }) => {
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const defaultFormat = '0.00';
     const getPlaceholder = placeholder ?? defaultFormat;
     const handleChangeText = (text) => {
-        if (autoFormatThousands) {
+        if (!disableGroupSeparator) {
             const formatted = formatThousands(text);
             onChangeText?.(formatted);
         }
@@ -20,7 +20,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
             onChangeText?.(text);
         }
     };
-    const displayValue = autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
     return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';

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

@@ -7,8 +7,8 @@ export interface CurrencyInputBaseProps {
     placeholder?: string;
     inBottomSheet?: boolean;
     required?: boolean;
-    /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
-    autoFormatThousands?: boolean;
+    /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
+    disableGroupSeparator?: boolean;
 }
 export type CurrencyInputProps = CurrencyInputBaseProps & Omit<TextInputProps, 'children'> & ViewProps;
 export default CurrencyInputProps;

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

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

package/build/components/DescriptionList/DescriptionList.js

@@ -4,10 +4,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { SectionHeader } from '../SectionHeader';
 import { DescriptionListContext } from './DescriptionList.context';
-const DescriptionList = ({ direction = 'column', itemHeadingWidth, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, children, style, ...props }) => {
+const DescriptionList = ({ direction = 'column', itemHeadingWidth, heading, helperText, headerTrailingContent, children, style, ...props }) => {
     styles.useVariants({ direction });
     const value = useMemo(() => ({ direction, itemHeadingWidth }), [direction, itemHeadingWidth]);
-    return (_jsx(DescriptionListContext.Provider, { value: value, children: _jsxs(View, { accessibilityRole: "list", ...props, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, linkText: linkText, linkHref: linkHref, linkIcon: linkIcon, linkIconPosition: linkIconPosition, linkOnPress: linkOnPress, linkTarget: linkTarget, linkShowIcon: linkShowIcon })) : null, children] }) }));
+    return (_jsx(DescriptionListContext.Provider, { value: value, children: _jsxs(View, { accessibilityRole: "list", ...props, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, children] }) }));
 };
 DescriptionList.displayName = 'DescriptionList';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,4 +1,3 @@
-import { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 export interface DescriptionListProps extends ViewProps {
     /** Direction orientation for items */
@@ -7,12 +6,6 @@ export interface DescriptionListProps extends ViewProps {
     itemHeadingWidth?: number;
     heading?: string;
     helperText?: string;
-    linkText?: string;
-    linkHref?: string;
-    linkIcon?: ComponentType;
-    linkIconPosition?: 'left' | 'right';
-    linkOnPress?: () => void;
-    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    linkShowIcon?: boolean;
+    headerTrailingContent?: React.ReactNode;
 }
 export default DescriptionListProps;

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

@@ -1,6 +1,6 @@
 import type DescriptionListItemProps from './DescriptionListItem.props';
 declare const DescriptionListItem: {
-    ({ heading, description, headingWidth, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, style, ...props }: DescriptionListItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, description, headingWidth, trailingContent, invalidText, style, ...props }: DescriptionListItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DescriptionListItem;

package/build/components/DescriptionList/DescriptionListItem.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
-import { Link } from '../Link';
+import Helper from '../Helper/Helper';
 import { useDescriptionListContext } from './DescriptionList.context';
-const DescriptionListItem = ({ heading, description, headingWidth, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, style, ...props }) => {
+const DescriptionListItem = ({ heading, description, headingWidth, trailingContent, invalidText, style, ...props }) => {
     const { components } = useTheme();
     const { direction, itemHeadingWidth = components.descriptionList.item.row.headingWidth } = useDescriptionListContext();
     styles.useVariants({ direction });
@@ -13,7 +14,7 @@ const DescriptionListItem = ({ heading, description, headingWidth, linkText, lin
     const descIsText = typeof description === 'string' || typeof description === 'number';
     const combinedLabel = headingIsText && descIsText ? `${heading}: ${description}` : undefined;
     const hideDescendants = !!combinedLabel;
-    return (_jsxs(View, { accessibilityRole: "text", accessible: !!combinedLabel, accessibilityLabel: combinedLabel, ...props, style: [styles.item, style], children: [_jsxs(View, { style: styles.textWrap, importantForAccessibility: hideDescendants ? 'no-hide-descendants' : undefined, accessibilityElementsHidden: hideDescendants || undefined, children: [_jsx(View, { style: [direction === 'row' && { width: headingWidth || itemHeadingWidth }], children: headingIsText ? _jsx(BodyText, { style: styles.headingText, children: heading }) : heading }), _jsx(View, { style: styles.descriptionWrapper, children: descIsText ? _jsx(BodyText, { children: description }) : description })] }), linkText ? (_jsx(Link, { href: linkHref, onPress: linkOnPress, target: linkTarget, showIcon: linkShowIcon, icon: linkIcon, iconPosition: linkIconPosition, accessibilityRole: "link", children: linkText })) : null] }));
+    return (_jsxs(View, { accessibilityRole: "text", accessible: !!combinedLabel, accessibilityLabel: combinedLabel, ...props, style: [styles.item, style], children: [_jsxs(View, { style: styles.textWrap, importantForAccessibility: hideDescendants ? 'no-hide-descendants' : undefined, accessibilityElementsHidden: hideDescendants || undefined, children: [_jsx(View, { style: [direction === 'row' && { width: headingWidth || itemHeadingWidth }], children: headingIsText ? _jsx(BodyText, { style: styles.headingText, children: heading }) : heading }), _jsxs(View, { style: styles.descriptionWrapper, children: [descIsText ? _jsx(BodyText, { children: description }) : description, !!invalidText && (_jsx(Helper, { validationStatus: "invalid", showIcon: true, icon: ErrorCircleSmallIcon, text: invalidText || '' }))] })] }), trailingContent ? trailingContent : null] }));
 };
 DescriptionListItem.displayName = 'DescriptionListItem';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
 export interface DescriptionListItemProps extends ViewProps {
     /** Heading / label part */
@@ -6,12 +6,7 @@ export interface DescriptionListItemProps extends ViewProps {
     /** Description / value part */
     description: ReactNode;
     headingWidth?: number;
-    linkText?: string;
-    linkHref?: string;
-    linkIcon?: ComponentType;
-    linkIconPosition?: 'left' | 'right';
-    linkOnPress?: () => void;
-    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    linkShowIcon?: boolean;
+    trailingContent?: ReactNode;
+    invalidText?: string;
 }
 export default DescriptionListItemProps;

package/build/components/IndicatorIconButton/IndicatorIconButton.d.ts

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

package/build/components/IndicatorIconButton/IndicatorIconButton.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+const IndicatorIconButton = ({ indicator = false, ...props }) => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(UnstyledIconButton, { size: "md", ...props }), indicator && _jsx(View, { style: styles.indicator })] }));
+};
+IndicatorIconButton.displayName = 'IndicatorIconButton';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        position: 'relative',
+        width: theme.components.iconButton.unstyled.md.width,
+        height: theme.components.iconButton.unstyled.md.height,
+    },
+    indicator: {
+        position: 'absolute',
+        top: 2,
+        right: 1,
+        width: theme.components.indicatorIconButton.indicator.width,
+        height: theme.components.indicatorIconButton.indicator.height,
+        borderRadius: theme.components.indicatorIconButton.indicator.radius,
+        backgroundColor: theme.color.interactive.destructive.surface.strong.default,
+        zIndex: 1,
+    },
+}));
+export default IndicatorIconButton;

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

@@ -0,0 +1,8 @@
+import { UnstyledIconButtonProps } from '../UnstyledIconButton';
+export type IndicatorIconButtonProps = Omit<UnstyledIconButtonProps, 'size' | 'disabled' | 'loading'> & {
+    /**
+     * If `true`, displays a red dot indicator in the top-right corner.
+     * @default false
+     */
+    indicator?: boolean;
+};

package/build/components/IndicatorIconButton/IndicatorIconButton.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as IndicatorIconButton } from './IndicatorIconButton';
+export type { IndicatorIconButtonProps } from './IndicatorIconButton.props';

package/build/components/IndicatorIconButton/index.js

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

package/build/components/Link/LinkText.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLinkContext } from './Link.context';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
+import { useLinkContext } from './Link.context';
 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 }));
+    return (_jsx(BodyText, { size: "md", weight: "semibold", ...props, style: [styles.text, props.style], children: children }));
 };
 LinkText.displayName = 'LinkText';
 const styles = StyleSheet.create(theme => ({

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

@@ -2,12 +2,10 @@ 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.d.ts

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

package/build/components/List/List.js

@@ -3,8 +3,8 @@ 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 { SectionHeader } from '../SectionHeader';
+import { ListContext } from './List.context';
 import { ListItem } from './ListItem';
 const markFirstListItem = (children) => {
     let found = false;
@@ -33,8 +33,8 @@ const markFirstListItem = (children) => {
     };
     return recursiveClone(children);
 };
-const List = ({ children, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, ...props }) => {
-    const { loading, disabled, divider = true, container = 'none' } = props;
+const List = ({ children, heading, helperText, headerTrailingContent, ...props }) => {
+    const { loading, disabled, container = 'none' } = props;
     const containerToCard = {
         variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
         colorScheme: container === 'subtleWhite' || container === 'emphasisWhite'
@@ -42,9 +42,9 @@ const List = ({ children, heading, helperText, linkText, linkHref, linkIcon, lin
             : 'neutralSubtle',
     };
     const updatedChildren = markFirstListItem(children);
-    const value = useMemo(() => ({ loading, disabled, divider, container }), [loading, disabled, divider, container]);
+    const value = useMemo(() => ({ loading, disabled, container }), [loading, disabled, container]);
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, linkText: linkText, linkHref: linkHref, linkOnPress: linkOnPress, linkTarget: linkTarget, linkIcon: linkIcon, linkIconPosition: linkIconPosition, linkShowIcon: linkShowIcon })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : 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 => ({

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

@@ -1,18 +1,10 @@
 import type { ViewProps } from 'react-native';
-import { ComponentType } from 'react';
 interface ListProps extends ViewProps {
     container?: 'none' | 'subtleWhite' | 'emphasisWhite' | 'subtleWarmWhite' | 'emphasisWarmWhite';
     heading?: string;
     helperText?: string;
-    linkText?: string;
-    linkHref?: string;
-    linkIcon?: ComponentType;
-    linkIconPosition?: 'left' | 'right';
-    linkOnPress?: () => void;
-    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    linkShowIcon?: boolean;
+    headerTrailingContent?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
-    divider?: boolean;
 }
 export default ListProps;

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

@@ -0,0 +1,18 @@
+import type ListActionProps from './ListAction.props';
+declare const ListAction: import("react").ForwardRefExoticComponent<ListActionProps & {
+    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 ListAction;

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 ListActionContent from './ListActionContent';
+import ListActionText from './ListActionText';
+import ListActionTrailingContent from './ListActionTrailingContent';
+import ListActionTrailingIcon from './ListActionTrailingIcon';
+const ListActionRoot = ({ heading, disabled, variant = 'subtle', ...props }) => {
+    const { onPress } = props;
+    const listContext = useListContext();
+    const { active } = props.states || { active: false };
+    const getListContainer = () => {
+        if (listContext?.container?.includes('subtle')) {
+            return 'subtle';
+        }
+        if (listContext?.container?.includes('emphasis')) {
+            return 'emphasis';
+        }
+        return undefined;
+    };
+    const isDisabled = disabled || listContext?.disabled || false;
+    const listItemVariant = getListContainer() || variant;
+    const testID = props.testID || 'list-action';
+    styles.useVariants({
+        variant: listItemVariant,
+        disabled: isDisabled,
+        active,
+        showDisabled: !listContext?.disabled && disabled,
+        isFirstChild: props.isFirst,
+        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 }) })] }));
+};
+const ListAction = createPressable({
+    Root: ListActionRoot,
+});
+ListAction.displayName = 'ListAction';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        paddingVertical: theme.components.list.item.functional.padding,
+        paddingHorizontal: theme.components.list.item.functional.padding,
+        flexDirection: 'row',
+        gap: theme.components.list.item.gap,
+        borderTopWidth: theme.borderWidth['1'],
+        borderStyle: 'solid',
+        variants: {
+            isFirstChild: {
+                true: {
+                    borderTopWidth: 0,
+                },
+            },
+            variant: {
+                subtle: {
+                    borderTopColor: theme.color.border.subtle,
+                },
+                emphasis: {
+                    borderTopColor: theme.color.border.strong,
+                },
+            },
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+            disabled: {
+                true: {
+                    cursor: 'auto',
+                },
+                false: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+            showDisabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            container: {
+                none: {
+                    paddingHorizontal: 0,
+                },
+                subtleWhite: {},
+                emphasisWhite: {},
+                subtleWarmWhite: {},
+                emphasisWarmWhite: {},
+            },
+        },
+    },
+    centeredTrailingIcon: {
+        justifyContent: 'center',
+    },
+}));
+export default ListAction;

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

@@ -0,0 +1,8 @@
+import type { PressableProps } from 'react-native';
+interface ListActionProps extends Omit<PressableProps, 'children'> {
+    heading: string;
+    disabled?: boolean;
+    variant?: 'subtle' | 'emphasis';
+    isFirst?: boolean;
+}
+export default ListActionProps;

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

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

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

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

package/build/components/List/ListAction/ListActionContent.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 ListActionContent = ({ children, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
+};
+ListActionContent.displayName = 'ListActionContent';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.list.item.contentGap,
+        flex: 1,
+    },
+}));
+export default ListActionContent;

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

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