@utilitywarehouse/hearth-react-native 0.16.1 → 0.17.0

package/build/components/DateInput/DateInput.js

@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import DateInputSegment from './DateInputSegment';
-const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }) => {
-    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day" })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month" })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year" }))] }) }));
+const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
 };
 DateInput.displayName = 'DateInput';
 const styles = StyleSheet.create(theme => ({
@@ -14,7 +14,6 @@ const styles = StyleSheet.create(theme => ({
     container: {
         flexDirection: 'row',
         gap: theme.components.input.date.gap,
-        // alignItems: 'stretch',
     },
 }));
 export default DateInput;

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

@@ -1,5 +1,6 @@
-import type { TextInputProps } from 'react-native';
+import type { TextInputProps, ViewProps } from 'react-native';
 import type { FormFieldBaseProps } from '../FormField/FormField.props';
+import LabelProps from '../Label/Label.props';
 export interface DateInputProps extends FormFieldBaseProps {
     /**
      * Whether the day segment is hidden.
@@ -76,4 +77,24 @@ export interface DateInputProps extends FormFieldBaseProps {
      * Callback fired when the year segment loses focus.
      */
     onYearBlur?: TextInputProps['onBlur'];
+    inputContainerStyle?: ViewProps['style'];
+    inputStyle?: ViewProps['style'];
+    inputLabelStyle?: LabelProps['style'];
+}
+export interface DateInputSegmentProps {
+    label: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (text: string) => void;
+    onFocus?: DateInputProps['onDayFocus'];
+    onBlur?: DateInputProps['onDayBlur'];
+    disabled?: boolean;
+    required?: boolean;
+    validationStatus?: DateInputProps['validationStatus'];
+    maxLength?: number;
+    readonly?: boolean;
+    testID?: string;
+    inputContainerStyle?: ViewProps['style'];
+    inputStyle?: ViewProps['style'];
+    inputLabelStyle?: LabelProps['style'];
 }

package/build/components/DateInput/DateInputSegment.d.ts

@@ -1,20 +1,6 @@
-import type { DateInputProps } from './DateInput.props';
-interface DateInputSegmentProps {
-    label: string;
-    placeholder?: string;
-    value?: string;
-    onChange?: (text: string) => void;
-    onFocus?: DateInputProps['onDayFocus'];
-    onBlur?: DateInputProps['onDayBlur'];
-    disabled?: boolean;
-    required?: boolean;
-    validationStatus?: DateInputProps['validationStatus'];
-    maxLength?: number;
-    readonly?: boolean;
-    testID?: string;
-}
+import type { DateInputSegmentProps } from './DateInput.props';
 declare const DateInputSegment: {
-    ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DateInputSegment;

package/build/components/DateInput/DateInputSegment.js

@@ -3,16 +3,16 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Input } from '../Input';
-const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }) => {
+const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
     styles.useVariants({ disabled });
-    return (_jsxs(View, { style: styles.container, children: [_jsx(BodyText, { size: "md", style: styles.label, children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: styles.input })] }));
+    return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
 };
 DateInputSegment.displayName = 'DateInputSegment';
 const styles = StyleSheet.create(theme => ({
     container: {
         flex: 1,
         gap: theme.components.input.gap,
-        // maxWidth: 96,
+        maxWidth: 96,
     },
     label: {
         variants: {
@@ -23,8 +23,5 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
-    input: {
-    // maxWidth: 96,
-    },
 }));
 export default DateInputSegment;

package/build/components/ExpandableCard/ExpandableCardGroup.d.ts

@@ -1,6 +1,6 @@
 import type ExpandableCardGroupProps from './ExpandableCardGroup.props';
 declare const ExpandableCardGroup: {
-    ({ heading, helperText, headerTrailingContent, children, style, testID, ...props }: ExpandableCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, helperText, headerTrailingContent, children, style, testID, invalidText, ...props }: ExpandableCardGroupProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ExpandableCardGroup;

package/build/components/ExpandableCard/ExpandableCardGroup.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { SectionHeader } from '../SectionHeader';
-const ExpandableCardGroup = ({ heading, helperText, headerTrailingContent, children, style, testID = 'expandable-card-group', ...props }) => {
-    return (_jsxs(View, { style: [styles.container, style], testID: testID, ...props, children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, _jsx(View, { style: styles.cardsContainer, children: children })] }));
+const ExpandableCardGroup = ({ heading, helperText, headerTrailingContent, children, style, testID = 'expandable-card-group', invalidText, ...props }) => {
+    return (_jsxs(View, { style: [styles.container, style], testID: testID, ...props, children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, _jsx(View, { style: styles.cardsContainer, children: children })] }));
 };
 ExpandableCardGroup.displayName = 'ExpandableCardGroup';
 const styles = StyleSheet.create(theme => ({

package/build/components/ExpandableCard/ExpandableCardGroup.props.d.ts

@@ -21,5 +21,9 @@ export interface ExpandableCardGroupProps extends ViewProps {
      * Test ID for testing
      */
     testID?: string;
+    /**
+     * Validation text displayed below the helper text when in an invalid state
+     */
+    invalidText?: string;
 }
 export default ExpandableCardGroupProps;

package/build/components/Input/Input.js

@@ -3,6 +3,7 @@ import { createInput } from '@gluestack-ui/input';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
@@ -19,7 +20,7 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, loading, clearable = false, required = true, inBottomSheet = false, style, label, labelVariant, helperText, helperIcon, validText, invalidText, ...props }, ref) => {
+const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, loading, clearable = false, required = true, inBottomSheet = false, style, label, labelVariant, helperText, helperIcon, validText, invalidText, prefix, suffix, ...props }, ref) => {
     const formFieldContext = useFormFieldContext();
     const inputLabel = label ?? formFieldContext?.label;
     const inputHelperText = helperText ?? formFieldContext?.helperText;
@@ -84,11 +85,11 @@ const Input = forwardRef(({ validationStatus = 'initial', children, disabled, fo
         }
         return accessibilityHint || props.accessibilityHint;
     };
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(InputComponent, { ...(children ? props : {}), validationStatus: inputValidationStatus, isInvalid: inputValidationStatus === 'invalid', isReadOnly: inputReadonly, isDisabled: inputDisabled, isFocused: focused, type: type, isRequired: inputRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(InputComponent, { ...(children ? props : {}), validationStatus: inputValidationStatus, isInvalid: inputValidationStatus === 'invalid', isReadOnly: inputReadonly, isDisabled: inputDisabled, isFocused: focused, type: type, isRequired: inputRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), !!prefix && (_jsx(InputSlot, { children: typeof prefix === 'string' || typeof prefix === 'number' ? (_jsx(BodyText, { children: prefix })) : (prefix) })), _jsx(InputField
                     // @ts-expect-error - ref forwarding issue
                     , { 
                         // @ts-expect-error - ref forwarding issue
-                        ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint() }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }) }));
+                        ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint() }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!suffix && (_jsx(InputSlot, { children: typeof suffix === 'string' || typeof suffix === 'number' ? (_jsx(BodyText, { children: suffix })) : (suffix) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }) }));
 });
 Input.displayName = 'Input';
 export default Input;

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

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import React from 'react';
 import type { TextInputProps, ViewProps } from 'react-native';
 export interface InputBaseProps {
     /**
@@ -43,12 +44,16 @@ export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
     onClear?: never;
     leadingIcon?: never;
     trailingIcon?: never;
+    prefix?: never;
+    suffix?: never;
 }
 interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputProps, 'children'> {
     children?: never;
     leadingIcon?: ComponentType;
     trailingIcon?: ComponentType;
     required?: boolean;
+    prefix?: string | number | React.ReactNode;
+    suffix?: string | number | React.ReactNode;
 }
 interface TextInputSpecificProps extends InputWithoutChildrenBaseProps {
     type?: 'text';
@@ -65,6 +70,8 @@ interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
     loading?: never;
     clearable?: never;
     onClear?: never;
+    prefix?: never;
+    suffix?: never;
 }
 interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     type: 'search';
@@ -73,6 +80,8 @@ interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     onClear?: () => void;
     showPasswordToggle?: never;
     format?: never;
+    prefix?: never;
+    suffix?: never;
 }
 export type InputWithoutChildrenProps = TextInputSpecificProps | PasswordInputSpecificProps | SearchInputSpecificProps;
 /**

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

@@ -3,11 +3,13 @@ export declare const ListContext: import("react").Context<{
     loading?: ListProps["loading"];
     disabled?: ListProps["disabled"];
     container?: ListProps["container"];
+    firstItemId?: string;
+    registerItem?: (id: string) => () => void;
 }>;
 export declare const useListContext: () => {
     loading?: ListProps["loading"];
     disabled?: ListProps["disabled"];
     container?: ListProps["container"];
+    firstItemId?: string;
+    registerItem?: (id: string) => () => void;
 };
-export declare const ListFirstItemContext: import("react").Context<boolean>;
-export declare const useListFirstItemContext: () => boolean;

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

@@ -4,5 +4,3 @@ export const useListContext = () => {
     const context = useContext(ListContext);
     return context;
 };
-export const ListFirstItemContext = createContext(false);
-export const useListFirstItemContext = () => useContext(ListFirstItemContext);

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

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

package/build/components/List/List.js

@@ -1,54 +1,41 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
-import { ListContext, ListFirstItemContext } from './List.context';
-import { ListAction } from './ListAction';
-import { ListItem } from './ListItem';
-const markFirstListItem = (children) => {
-    let found = false;
-    const recursiveClone = (children) => {
-        return React.Children.map(children, (child) => {
-            if (!React.isValidElement(child))
-                return child;
-            // Check if the current element is the ListItem or ListAction and hasn't been marked yet
-            if (!found) {
-                if (child.type === ListItem || child.type === ListAction) {
-                    found = true;
-                    return (_jsx(ListFirstItemContext.Provider, { value: true, children: child }));
-                }
-                // If the child has nested children, process them recursively
-                if (React.isValidElement(child) &&
-                    child.props &&
-                    typeof child.props === 'object' &&
-                    child.props !== null &&
-                    'children' in child.props &&
-                    child.props.children) {
-                    const clonedChildren = recursiveClone(child.props.children);
-                    return React.cloneElement(child, { children: clonedChildren });
-                }
-                found = true;
-                return _jsx(ListFirstItemContext.Provider, { value: true, children: child });
-            }
-            return child;
-        });
-    };
-    return recursiveClone(children);
-};
-const List = ({ children, heading, helperText, headerTrailingContent, ...props }) => {
+import { ListContext } from './List.context';
+const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
     const { loading, disabled, container = 'none' } = props;
+    const orderRef = useRef([]);
+    const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
         variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
         colorScheme: container === 'subtleWhite' || container === 'emphasisWhite'
             ? 'neutralStrong'
             : 'neutralSubtle',
     };
-    const updatedChildren = markFirstListItem(children);
-    const value = useMemo(() => ({ loading, disabled, container }), [loading, disabled, container]);
+    const registerItem = useCallback((id) => {
+        if (!orderRef.current.includes(id)) {
+            orderRef.current.push(id);
+        }
+        const nextFirst = orderRef.current[0];
+        setFirstItemId(prev => (prev === nextFirst ? prev : nextFirst));
+        return () => {
+            orderRef.current = orderRef.current.filter(currentId => currentId !== id);
+            const nextFirst = orderRef.current[0];
+            setFirstItemId(prev => (prev === nextFirst ? prev : nextFirst));
+        };
+    }, []);
+    const value = {
+        loading,
+        disabled,
+        container,
+        firstItemId,
+        registerItem,
+    };
     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, trailingContent: headerTrailingContent })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (React.Children.count(updatedChildren) > 0 && (_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, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

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

@@ -6,5 +6,6 @@ interface ListProps extends ViewProps {
     headerTrailingContent?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    invalidText?: string;
 }
 export default ListProps;

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

@@ -1,17 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createPressable } from '@gluestack-ui/pressable';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable } from 'react-native';
+import { useId, useLayoutEffect } from 'react';
+import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { Skeleton } from '../../Skeleton';
+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 ListActionRoot = ({ heading, disabled, variant = 'subtle', loading, ...props }) => {
     const { onPress } = props;
     const listContext = useListContext();
-    const isFirstContext = useListFirstItemContext();
+    const { registerItem, firstItemId } = listContext;
     const { active } = props.states || { active: false };
     const getListContainer = () => {
         if (listContext?.container?.includes('subtle')) {
@@ -24,16 +26,24 @@ const ListActionRoot = ({ heading, disabled, variant = 'subtle', ...props }) =>
     };
     const isDisabled = disabled || listContext?.disabled || false;
     const listItemVariant = getListContainer() || variant;
+    const actionId = useId();
+    useLayoutEffect(() => {
+        if (!registerItem) {
+            return;
+        }
+        return registerItem(actionId);
+    }, [actionId, registerItem]);
+    const isFirstChild = firstItemId === actionId;
     const testID = props.testID || 'list-action';
     styles.useVariants({
         variant: listItemVariant,
         disabled: isDisabled,
         active,
         showDisabled: !listContext?.disabled && disabled,
-        isFirstChild: isFirstContext,
+        isFirstChild,
         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 }) })] }));
+    return (_jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled || !onPress, children: loading ? (_jsxs(View, { style: styles.loadingWrap, children: [_jsx(Skeleton, { style: { flex: 1, maxWidth: 166 }, width: "auto", height: 24, borderRadius: "sm" }), _jsx(Skeleton, { width: 24, height: 24, borderRadius: "sm" })] })) : (_jsxs(_Fragment, { children: [_jsx(ListActionContent, { children: _jsx(ListActionText, { children: heading }) }), _jsx(ListActionTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListActionTrailingIcon, { as: ChevronRightSmallIcon }) })] })) }));
 };
 const ListAction = createPressable({
     Root: ListActionRoot,
@@ -100,5 +110,12 @@ const styles = StyleSheet.create(theme => ({
     centeredTrailingIcon: {
         justifyContent: 'center',
     },
+    loadingWrap: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        gap: theme.space['200'],
+    },
 }));
 export default ListAction;

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

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

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useMemo } from 'react';
+import { useId, useLayoutEffect, useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { useListContext } from '../List.context';
 import { ListItemContext } from './ListItem.context';
 import ListItemContent from './ListItemContent';
 import ListItemHeading from './ListItemHeading';
@@ -16,8 +16,16 @@ import ListItemTrailingIcon from './ListItemTrailingIcon';
 const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant = 'subtle', badge, badgePosition = 'bottom', numericValue, truncateHeading = false, truncateHelperText = false, ...props }) => {
     const { onPress } = props;
     const listContext = useListContext();
-    const isFirstContext = useListFirstItemContext();
+    const { registerItem, firstItemId } = listContext;
     const { active } = states || { active: false };
+    const itemId = useId();
+    useLayoutEffect(() => {
+        if (!registerItem) {
+            return;
+        }
+        return registerItem(itemId);
+    }, [itemId, registerItem]);
+    const isFirstChild = firstItemId === itemId;
     const getListContainer = () => {
         if (listContext?.container?.includes('subtle')) {
             return 'subtle';
@@ -39,7 +47,7 @@ const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, di
         active,
         disabled: isDisabled || isLoading,
         showDisabled: !listContext.disabled && disabled,
-        isFirstChild: isFirstContext,
+        isFirstChild,
         container: listContext?.container,
     });
     const value = useMemo(() => {

package/build/utils/isThemedImageProps.d.ts

@@ -1,4 +1,4 @@
 import { ImageProps } from 'react-native';
-import { ThemedImageProps } from 'src/components';
+import { ThemedImageProps } from '../components';
 declare const isThemedImageProps: (props: ThemedImageProps | ImageProps) => props is ThemedImageProps;
 export default isThemedImageProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,8 +56,8 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },