@utilitywarehouse/hearth-react-native 0.4.2 → 0.6.0

package/build/components/Carousel/CarouselControlItem.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { useContext } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import CarouselContext from './Carousel.context';
+export const CarouselControlItemRoot = ({ active, style, index, activeStyle, onPress, disabled, ...props }) => {
+    const { inverted, numItems } = useContext(CarouselContext);
+    styles.useVariants({ active, inverted });
+    return (_jsx(Pressable, { style: [styles.item, active && activeStyle], onPress: onPress, disabled: disabled, accessibilityLabel: `Page ${index + 1} of ${numItems}`, ...props, children: _jsx(View, { style: [styles.circle, style] }) }));
+};
+const CarouselControlItem = createPressable({
+    Root: CarouselControlItemRoot,
+});
+CarouselControlItem.displayName = 'CarouselControlItem';
+const styles = StyleSheet.create(theme => ({
+    item: {
+        width: 24,
+        height: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    circle: {
+        width: theme.components.carouselControl.size,
+        height: theme.components.carouselControl.size,
+        borderRadius: theme.borderRadius.full,
+        borderColor: theme.color.interactive.functional.border.subtle,
+        borderWidth: theme.borderWidth[2],
+        backgroundColor: 'transparent',
+        paddingTop: theme.space['100'],
+        overflow: 'hidden',
+        _hover: {
+            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+        },
+        variants: {
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.functional.foreground.subtle,
+                    _hover: {
+                        backgroundColor: theme.color.interactive.functional.foreground.subtle,
+                    },
+                },
+            },
+            inverted: {
+                true: {
+                    borderColor: theme.color.interactive.functional.border.inverted,
+                    _hover: {
+                        backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.hover,
+                    },
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                active: true,
+                inverted: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.functional.foreground.inverted,
+                },
+            },
+        ],
+    },
+}));
+export default CarouselControlItem;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CarouselControlsProps } from './Carousel.props';
+export declare const CarouselControls: FC<CarouselControlsProps>;
+export default CarouselControls;

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/Container/Container.d.ts

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

package/build/components/Container/Container.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
+const Container = ({ style, children, space = 'md', ...props }) => {
+    const { computedStyles, remainingProps } = useStyleProps(props);
+    styles.useVariants({ space });
+    return (_jsx(View, { style: [styles.container(computedStyles), style], ...remainingProps, children: children }));
+};
+Container.displayName = 'Container';
+const styles = StyleSheet.create(theme => ({
+    container: extra => ({
+        paddingTop: typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
+            ? {
+                base: theme.layout.mobile.container.paddingTop,
+                md: theme.layout.tablet.container.paddingTop,
+                lg: theme.layout.desktop.container.paddingTop,
+            }
+            : undefined,
+        paddingBottom: typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
+            ? {
+                base: theme.layout.mobile.container.paddingBottom,
+                md: theme.layout.tablet.container.paddingBottom,
+                lg: theme.layout.desktop.container.paddingBottom,
+            }
+            : undefined,
+        marginHorizontal: typeof extra.margin === 'undefined' && typeof extra.marginHorizontal === 'undefined'
+            ? {
+                base: theme.layout.mobile.container.margin,
+                md: theme.layout.tablet.container.margin,
+                lg: theme.layout.desktop.container.margin,
+            }
+            : undefined,
+        ...extra,
+        variants: {
+            space: theme.globalStyle.variants.space,
+        },
+    }),
+}));
+export default Container;

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

@@ -0,0 +1,85 @@
+import type { ViewProps } from 'react-native';
+import { SpaceValue, SpacingValues } from '../../types';
+interface ContainerProps extends ViewProps {
+    /**
+     * The padding of the container.
+     */
+    padding?: SpaceValue;
+    /**
+     * The horizontal padding of the container.
+     */
+    paddingHorizontal?: SpaceValue;
+    /**
+     * The vertical padding of the container.
+     */
+    paddingVertical?: SpaceValue;
+    /**
+     * The top padding of the container.
+     */
+    paddingTop?: SpaceValue;
+    /**
+     * The bottom padding of the container.
+     */
+    paddingBottom?: SpaceValue;
+    /**
+     * The left padding of the container.
+     */
+    paddingLeft?: SpaceValue;
+    /**
+     * The right padding of the container.
+     */
+    paddingRight?: SpaceValue;
+    /**
+     * The margin of the container.
+     */
+    margin?: SpaceValue;
+    /**
+     * The horizontal margin of the container.
+     */
+    marginHorizontal?: SpaceValue;
+    /**
+     * The vertical margin of the container.
+     */
+    marginVertical?: SpaceValue;
+    /**
+     * The top margin of the container.
+     */
+    marginTop?: SpaceValue;
+    /**
+     * The bottom margin of the container.
+     */
+    marginBottom?: SpaceValue;
+    /**
+     * The left margin of the container.
+     */
+    marginLeft?: SpaceValue;
+    /**
+     * The right margin of the container.
+     */
+    marginRight?: SpaceValue;
+    p?: SpaceValue;
+    px?: SpaceValue;
+    py?: SpaceValue;
+    pt?: SpaceValue;
+    pb?: SpaceValue;
+    pl?: SpaceValue;
+    pr?: SpaceValue;
+    m?: SpaceValue;
+    mx?: SpaceValue;
+    my?: SpaceValue;
+    mt?: SpaceValue;
+    mb?: SpaceValue;
+    ml?: SpaceValue;
+    mr?: SpaceValue;
+    /**
+     * The space between child elements (gap).
+     */
+    space?: SpacingValues;
+    /**
+     * The space between child elements.
+     */
+    gap?: SpaceValue;
+    backgroundColor?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
+    bg?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
+}
+export default ContainerProps;

package/build/components/Container/Container.props.js

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

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

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

package/build/components/Container/index.js

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

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;