@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

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

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

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

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

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

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

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

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

package/build/components/List/ListAction/ListActionTrailingIcon.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 ListActionTrailingIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? StyleSheet.compose(styles.icon, props.style)
+            : [styles.icon, props.style], children: children }));
+};
+ListActionTrailingIcon.displayName = 'ListActionTrailingIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.color.icon.primary,
+        width: 24,
+        height: 24,
+    },
+}));
+export default ListActionTrailingIcon;

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

@@ -0,0 +1,6 @@
+export { default as ListAction } from './ListAction';
+export type { default as ListActionProps } from './ListAction.props';
+export { default as ListActionContent } from './ListActionContent';
+export { default as ListActionText } from './ListActionText';
+export { default as ListActionTrailingContent } from './ListActionTrailingContent';
+export { default as ListActionTrailingIcon } from './ListActionTrailingIcon';

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

@@ -0,0 +1,5 @@
+export { default as ListAction } from './ListAction';
+export { default as ListActionContent } from './ListActionContent';
+export { default as ListActionText } from './ListActionText';
+export { default as ListActionTrailingContent } from './ListActionTrailingContent';
+export { default as ListActionTrailingIcon } from './ListActionTrailingIcon';

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

@@ -1,5 +1,5 @@
 import ListItemProps from './ListItem.props';
-export interface IListItemContext extends Pick<ListItemProps, 'divider' | 'loading' | 'disabled'> {
+export interface IListItemContext extends Pick<ListItemProps, 'loading' | 'disabled'> {
     showPressed?: boolean;
     active?: boolean;
 }

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

@@ -1,8 +1,6 @@
 import type { PressableProps, ViewProps } from 'react-native';
-import type { ColorValue } from '../../../types';
+import BadgeProps from '../../Badge/Badge.props';
 interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
-    divider?: boolean;
-    dividerColor?: ColorValue;
     loading?: boolean;
     disabled?: boolean;
     variant?: 'subtle' | 'emphasis';
@@ -10,17 +8,23 @@ interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
 }
 export interface ListItemWithChildren extends ListItemBaseProps {
     children: ViewProps['children'];
-    text?: never;
+    heading?: never;
     helperText?: never;
     leadingContent?: never;
     trailingContent?: never;
+    numericValue?: never;
+    badge?: never;
+    badgePosition?: never;
 }
 export interface ListItemWithoutChildren extends ListItemBaseProps {
     children?: never;
-    text: string;
+    heading: string;
     helperText?: string;
     leadingContent?: ViewProps['children'];
     trailingContent?: ViewProps['children'];
+    numericValue?: string | number;
+    badge?: BadgeProps;
+    badgePosition?: 'top' | 'bottom';
 }
 type ListItemProps = ListItemWithChildren | ListItemWithoutChildren;
 export default ListItemProps;

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

@@ -1,6 +1,6 @@
 import type ListItemProps from './ListItem.props';
 declare const ListItemRoot: {
-    ({ text, helperText, leadingContent, trailingContent, disabled, divider, loading, children, states, variant, ...props }: ListItemProps & {
+    ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant, badge, badgePosition, numericValue, ...props }: ListItemProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

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

@@ -3,6 +3,8 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { Badge } from '../../Badge';
+import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
 import { useListContext } from '../List.context';
 import { ListItemContext } from './ListItem.context';
@@ -12,7 +14,7 @@ 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 ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant = 'subtle', badge, badgePosition = 'bottom', numericValue, ...props }) => {
     const { onPress } = props;
     const listContext = useListContext();
     const { active } = states || { active: false };
@@ -27,13 +29,11 @@ const ListItemRoot = ({ text, helperText, leadingContent, trailingContent, disab
     };
     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,
@@ -45,16 +45,15 @@ const ListItemRoot = ({ text, helperText, leadingContent, trailingContent, disab
     const value = useMemo(() => {
         return {
             showPressed,
-            divider: showDivider,
             active,
             loading: isLoading,
             disabled: isDisabled,
         };
-    }, [active, showPressed, showDivider, isLoading, isDisabled]);
+    }, [active, showPressed, 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] })) }) }));
+    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 ? _jsx(Badge, { ...badge }) : null, _jsx(ListItemText, { children: heading }), helperText ? _jsx(ListItemHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? _jsx(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 => ({
@@ -63,13 +62,9 @@ const styles = StyleSheet.create(theme => ({
         paddingHorizontal: theme.components.list.item.functional.padding,
         flexDirection: 'row',
         gap: theme.components.list.item.gap,
+        borderTopWidth: theme.borderWidth['1'],
+        borderStyle: 'solid',
         variants: {
-            divider: {
-                true: {
-                    borderTopWidth: theme.borderWidth['1'],
-                    borderStyle: 'solid',
-                },
-            },
             isFirstChild: {
                 true: {
                     borderTopWidth: 0,
@@ -131,5 +126,8 @@ const styles = StyleSheet.create(theme => ({
             },
         ],
     },
+    centeredTrailingIcon: {
+        justifyContent: 'center',
+    },
 }));
 export default ListItemRoot;

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

@@ -1,9 +1,9 @@
 export { default as ListItem } from './ListItem';
-export { default as ListItemIcon } from './ListItemIcon';
-export { default as ListItemContent } from './ListItemContent';
 export type { default as ListItemProps } from './ListItem.props';
+export { default as ListItemContent } from './ListItemContent';
+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';
-export { default as ListItemHelperText } from './ListItemHelperText';
-export { default as ListItemText } from './ListItemText';

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

@@ -1,8 +1,8 @@
 export { default as ListItem } from './ListItem';
-export { default as ListItemIcon } from './ListItemIcon';
 export { default as ListItemContent } from './ListItemContent';
+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';
-export { default as ListItemHelperText } from './ListItemHelperText';
-export { default as ListItemText } from './ListItemText';

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

@@ -1,3 +1,4 @@
 export { default as List } from './List';
 export { useListContext } from './List.context';
+export * from './ListAction';
 export * from './ListItem';

package/build/components/List/index.js

@@ -1,3 +1,4 @@
 export { default as List } from './List';
 export { useListContext } from './List.context';
+export * from './ListAction';
 export * from './ListItem';

package/build/components/ProgressStepper/ProgressStep.d.ts

@@ -0,0 +1,10 @@
+import { ProgressStepProps } from './ProgressStepper.props';
+interface ProgressStepInternalProps extends ProgressStepProps {
+    index?: number;
+    isLast?: boolean;
+}
+declare const ProgressStep: {
+    ({ state, index, isLast, ...rest }: ProgressStepInternalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ProgressStep;

package/build/components/ProgressStepper/ProgressStep.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Icon } from '../Icon';
+import { BodyText } from '../BodyText';
+const ProgressStep = ({ state, index = 0, isLast = false, ...rest }) => {
+    styles.useVariants({ state, isLast });
+    const renderStepNumber = () => {
+        return (_jsx(BodyText, { size: "md", weight: "semibold", style: styles.text, children: index + 1 }));
+    };
+    return (_jsxs(View, { style: styles.container, accessible: true, "aria-label": `Step ${index + 1}, ${rest.id}, ${state}`, ...rest, children: [_jsx(View, { style: styles.step, children: state === 'complete' ? (_jsx(Icon, { as: TickSmallIcon, width: 20, height: 20, style: styles.text })) : state === 'active' ? (_jsx(View, { style: styles.inner, children: renderStepNumber() })) : (renderStepNumber()) }), !isLast && _jsx(View, { style: styles.connector })] }));
+};
+ProgressStep.displayName = 'ProgressStep';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        variants: {
+            isLast: {
+                true: {
+                    flex: 0,
+                    _web: {
+                        flex: 'none',
+                    },
+                },
+                false: {
+                    flex: 1,
+                },
+            },
+        },
+    },
+    step: {
+        width: theme.components.progressStepper.indicator.width,
+        height: theme.components.progressStepper.indicator.height,
+        borderRadius: theme.borderRadius.full,
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            state: {
+                complete: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                active: {
+                    backgroundColor: theme.color.surface.brand.default,
+                    padding: theme.borderWidth[2],
+                },
+                incomplete: {
+                    borderWidth: theme.components.progressStepper.indicator.future.borderWidth,
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+        },
+    },
+    inner: {
+        width: theme.components.progressStepper.indicator.width - theme.borderWidth[2] * 2,
+        height: theme.components.progressStepper.indicator.height - theme.borderWidth[2] * 2,
+        borderRadius: theme.borderRadius.full,
+        backgroundColor: theme.color.surface.brand.default,
+        borderWidth: theme.borderWidth[2],
+        borderColor: theme.color.surface.neutral.subtle,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        variants: {
+            state: {
+                complete: {
+                    color: theme.color.text.inverted,
+                },
+                active: {
+                    color: theme.color.text.inverted,
+                    // NOTE: Adjust lineHeight to vertically center the text within the smaller inner circle
+                    lineHeight: theme.lineHeight[500] - theme.borderWidth[2] * 2,
+                },
+                incomplete: {
+                    color: theme.color.text.primary,
+                },
+            },
+        },
+    },
+    connector: {
+        flex: 1,
+        height: theme.components.progressStepper.bar.height,
+        variants: {
+            state: {
+                complete: {
+                    backgroundColor: theme.components.progressStepper.bar.complete.backgroundColor,
+                },
+                active: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+                incomplete: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+            },
+        },
+    },
+}));
+export default ProgressStep;

package/build/components/ProgressStepper/ProgressStepper.d.ts

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

package/build/components/ProgressStepper/ProgressStepper.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, Children, cloneElement, isValidElement } from 'react';
+import ProgressStepperRoot from './ProgressStepperRoot';
+const ProgressStepper = ({ children, ...rest }) => {
+    // Process children to add index and isLast props
+    const processedChildren = useMemo(() => {
+        const childrenArray = Children.toArray(children);
+        return childrenArray.map((child, index) => {
+            if (isValidElement(child)) {
+                return cloneElement(child, {
+                    ...child.props,
+                    index,
+                    isLast: index === childrenArray.length - 1,
+                });
+            }
+            return child;
+        });
+    }, [children]);
+    return _jsx(ProgressStepperRoot, { ...rest, children: processedChildren });
+};
+ProgressStepper.displayName = 'ProgressStepper';
+export default ProgressStepper;

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

@@ -0,0 +1,22 @@
+import { ViewProps } from 'react-native';
+export type StepState = 'complete' | 'active' | 'incomplete';
+export interface ProgressStepperProps extends ViewProps {
+    /**
+     * Child ProgressStep components
+     */
+    children: React.ReactNode;
+}
+export interface ProgressStepProps extends ViewProps {
+    /**
+     * Unique identifier for the step
+     */
+    id: string;
+    /**
+     * Current state of the step
+     */
+    state: StepState;
+}
+export interface ProgressStepperRootProps extends ViewProps {
+    children: React.ReactNode;
+}
+export default ProgressStepperProps;

package/build/components/ProgressStepper/ProgressStepper.props.js

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

package/build/components/ProgressStepper/ProgressStepperRoot.d.ts

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

package/build/components/ProgressStepper/ProgressStepperRoot.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const ProgressStepperRoot = ({ children, style, ...rest }) => {
+    return (_jsx(View, { style: [styles.root, style], ...rest, children: children }));
+};
+ProgressStepperRoot.displayName = 'ProgressStepperRoot';
+const styles = StyleSheet.create(() => ({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+}));
+export default ProgressStepperRoot;

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

@@ -0,0 +1,3 @@
+export { default as ProgressStepper } from './ProgressStepper';
+export { default as ProgressStep } from './ProgressStep';
+export type { ProgressStepperProps, ProgressStepProps, StepState } from './ProgressStepper.props';

package/build/components/ProgressStepper/index.js

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

package/build/components/Radio/RadioTextContent.d.ts

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

package/build/components/Radio/RadioTextContent.js

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

package/build/components/SectionHeader/SectionHeader.d.ts

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

package/build/components/SectionHeader/SectionHeader.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Link } from '../Link';
+import { Badge } from '../Badge';
+import { Helper } from '../Helper';
 import SectionHeaderTitle from './SectionHeaderHeading';
 import SectionHeaderHelperText from './SectionHeaderHelperText';
 import SectionHeaderTextContent from './SectionHeaderTextContent';
-const SectionHeader = ({ heading, helperText, children, style, linkHref, linkIcon, linkIconPosition, linkOnPress, linkShowIcon, linkTarget, linkText, ...props }) => {
-    return (_jsx(View, { ...props, style: [styles.container, style], children: children ? (children) : (_jsxs(_Fragment, { children: [_jsxs(SectionHeaderTextContent, { children: [_jsx(SectionHeaderTitle, { children: heading }), !!helperText && _jsx(SectionHeaderHelperText, { children: helperText })] }), !!linkText && (_jsx(Link, { href: linkHref, onPress: linkOnPress, icon: linkIcon, showIcon: linkShowIcon, iconPosition: linkIconPosition, target: linkTarget, children: linkText }))] })) }));
+import SectionHeaderTrailingContent from './SectionHeaderTrailingContent';
+const SectionHeader = ({ heading, helperText, children, style, trailingContent, badge, invalidText, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, style], children: children ? (children) : (_jsxs(_Fragment, { children: [_jsxs(SectionHeaderTextContent, { children: [_jsx(SectionHeaderTitle, { children: heading }), !!helperText && _jsx(SectionHeaderHelperText, { children: helperText }), !!invalidText && (_jsx(Helper, { validationStatus: "invalid", showIcon: true, icon: ErrorCircleSmallIcon, text: invalidText || '' }))] }), !!badge && _jsx(Badge, { ...badge }), !!trailingContent && (_jsx(SectionHeaderTrailingContent, { children: trailingContent }))] })) }));
 };
 SectionHeader.displayName = 'SectionHeader';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,5 +1,6 @@
-import { ComponentType, Ref } from 'react';
-import type { ViewProps, View } from 'react-native';
+import { Ref } from 'react';
+import type { View, ViewProps } from 'react-native';
+import BadgeProps from '../Badge/Badge.props';
 interface SectionHeaderBaseProps extends Omit<ViewProps, 'children'> {
     ref?: Ref<View>;
 }
@@ -7,25 +8,17 @@ export interface SectionHeaderWithChildren extends SectionHeaderBaseProps {
     children: ViewProps['children'];
     heading?: never;
     helperText?: never;
-    linkText?: never;
-    linkHref?: never;
-    linkOnPress?: never;
-    linkTarget?: never;
-    linkIcon?: never;
-    linkIconPosition?: never;
-    linkShowIcon?: never;
+    trailingContent?: never;
+    badge?: never;
+    invalidText?: never;
 }
 export interface SectionHeaderWithoutChildren extends SectionHeaderBaseProps {
     children?: never;
     heading: string;
     helperText?: string;
-    linkText?: string;
-    linkHref?: string;
-    linkOnPress?: () => void;
-    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    linkIcon?: ComponentType;
-    linkIconPosition?: 'left' | 'right';
-    linkShowIcon?: boolean;
+    trailingContent?: React.ReactNode;
+    badge?: BadgeProps;
+    invalidText?: string;
 }
 type SectionHeaderProps = SectionHeaderWithChildren | SectionHeaderWithoutChildren;
 export default SectionHeaderProps;

package/build/components/SectionHeader/SectionHeaderTrailingContent.d.ts

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

package/build/components/SectionHeader/SectionHeaderTrailingContent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const SectionHeaderTrailingContent = ({ children, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
+};
+SectionHeaderTrailingContent.displayName = 'SectionHeaderTrailingContent';
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: 'flex-start',
+    },
+});
+export default SectionHeaderTrailingContent;

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

@@ -2,3 +2,4 @@ export { default as SectionHeader } from './SectionHeader';
 export { default as SectionHeaderHeading } from './SectionHeaderHeading';
 export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
 export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';
+export { default as SectionHeaderTrailingContent } from './SectionHeaderTrailingContent';

package/build/components/SectionHeader/index.js

@@ -2,3 +2,4 @@ export { default as SectionHeader } from './SectionHeader';
 export { default as SectionHeaderHeading } from './SectionHeaderHeading';
 export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
 export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';
+export { default as SectionHeaderTrailingContent } from './SectionHeaderTrailingContent';

package/build/components/Tabs/Tab.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
 import { Icon } from '../Icon';
 import { useTabsContext } from './Tabs.context';
 import { createPressable } from '@gluestack-ui/pressable';
+import { BodyText } from '../BodyText';
 const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
     const { value: active, select, size, disabled: allDisabled, registerTabLayout, } = useTabsContext();
     const { active: pressed } = states || { active: false };
@@ -23,7 +23,7 @@ const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
     }, [value, registerTabLayout]);
     return (_jsx(Pressable, { ref: ref, accessibilityRole: "tab", accessibilityState: { selected: isActive, disabled: !!(disabled || allDisabled) }, onPress: handlePress, onLayout: handleLayout, style: [styles.tab, style], ...(Platform.OS === 'web'
             ? { id: `tab-${value}`, 'aria-controls': `tabpanel-${value}` }
-            : null), ...props, children: _jsxs(View, { style: styles.content, children: [icon ? _jsx(Icon, { as: icon }) : null, _jsx(DetailText, { size: size, children: children })] }) }));
+            : null), ...props, children: _jsxs(View, { style: styles.content, children: [icon ? _jsx(Icon, { as: icon }) : null, _jsx(BodyText, { size: size, weight: "semibold", children: children })] }) }));
 };
 Tab.displayName = 'Tab';
 const styles = StyleSheet.create(theme => ({

package/build/components/ToggleButton/ToggleButtonText.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 const ToggleButtonText = ({ children, toggled, ...props }) => {
     styles.useVariants({ toggled });
-    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 }));
 };
 ToggleButtonText.displayName = 'ToggleButtonText';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
+import { ColorValue } from '../../types';
 export type UnstyledIconButtonProps = {
     disabled?: boolean;
     pressed?: boolean;
@@ -8,5 +9,7 @@ export type UnstyledIconButtonProps = {
     size?: 'sm' | 'md';
     inverted?: boolean;
     children?: React.ReactNode;
-    iconStyle?: ViewProps['style'];
+    iconStyle?: ViewProps['style'] & {
+        color?: ColorValue;
+    };
 } & PressableProps;