@utilitywarehouse/hearth-react-native 0.16.2 → 0.17.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.16.2 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.17.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.16.2 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.17.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -28,7 +28,7 @@
   52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
-  75:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
    72:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
@@ -55,15 +55,15 @@
 
 ✖ 24 problems (0 errors, 24 warnings)
 
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1369.850 |    61.9%
-react-hooks/rules-of-hooks                |    90.157 |     4.1%
-react-hooks/exhaustive-deps               |    78.401 |     3.5%
-no-global-assign                          |    65.908 |     3.0%
-no-loss-of-precision                      |    42.121 |     1.9%
-no-unexpected-multiline                   |    40.780 |     1.8%
-@typescript-eslint/ban-ts-comment         |    35.389 |     1.6%
-no-misleading-character-class             |    33.623 |     1.5%
-@typescript-eslint/triple-slash-reference |    22.898 |     1.0%
-prefer-const                              |    21.548 |     1.0%
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1454.377 |    60.3%
+react-hooks/rules-of-hooks                        |   109.992 |     4.6%
+react-hooks/exhaustive-deps                       |    91.815 |     3.8%
+no-global-assign                                  |    66.528 |     2.8%
+no-loss-of-precision                              |    57.391 |     2.4%
+@typescript-eslint/ban-ts-comment                 |    54.505 |     2.3%
+no-misleading-character-class                     |    45.527 |     1.9%
+no-unexpected-multiline                           |    39.063 |     1.6%
+no-regex-spaces                                   |    29.197 |     1.2%
+@typescript-eslint/no-unnecessary-type-constraint |    28.583 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,137 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.17.0
+
+### Minor Changes
+
+- [#867](https://github.com/utilitywarehouse/hearth/pull/867) [`9a15eb8`](https://github.com/utilitywarehouse/hearth/commit/9a15eb8c659aa541988da6f28f6c50261f3557f9) Thanks [@jordmccord](https://github.com/jordmccord)! - 💔 [BREAKING CHANGE]: Require `CardActions` wrapper for `CardAction` groups.
+
+  `Card` now only treats actions as such when they are wrapped in `CardActions`. This removes wrapper heuristics and makes action grouping explicit while keeping automatic content wrapping.
+
+  **Components affected**:
+  - `Card`
+  - `CardActions`
+  - `CardAction`
+
+  **Developer changes**:
+
+  Wrap all `CardAction` items in `CardActions`:
+
+  ```diff
+  - <Card>
+  -   <CardAction heading="Action 1" onPress={() => {}} />
+  -   <CardAction heading="Action 2" onPress={() => {}} />
+  - </Card>
+  + <Card>
+  +   <CardActions>
+  +     <CardAction heading="Action 1" onPress={() => {}} />
+  +     <CardAction heading="Action 2" onPress={() => {}} />
+  +   </CardActions>
+  + </Card>
+  ```
+
+- [#860](https://github.com/utilitywarehouse/hearth/pull/860) [`ec44a9d`](https://github.com/utilitywarehouse/hearth/commit/ec44a9d3d7a2d95ab69b6e4c461104402d82659d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `prefix` and `suffix` props to `Input` component
+
+  The `Input` component now supports `prefix` and `suffix` props, allowing you to display text or custom content before and after the input field. This is useful for adding units, currency symbols, or other contextual information.
+
+  **Components affected**:
+  - `Input`
+
+  **Developer changes**:
+
+  Use the `prefix` and `suffix` props to add content before or after the input:
+
+  ```tsx
+  <Input label="Amount" prefix="£" suffix="GBP" placeholder="0.00" />
+  ```
+
+  You can also pass custom React nodes:
+
+  ```tsx
+  <Input label="Email" prefix={<CustomIcon />} suffix={<BodyText>@example.com</BodyText>} />
+  ```
+
+  **Note**: The `prefix` and `suffix` props are not available on `password` and `search` input types, as these have specific UI patterns.
+
+- [#862](https://github.com/utilitywarehouse/hearth/pull/862) [`654552e`](https://github.com/utilitywarehouse/hearth/commit/654552e33d56e4b2b2ba8fb783b7f9a7c57ba212) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `loading` prop to `ListAction` component
+
+  The `ListAction` component now supports a `loading` prop that displays a skeleton loading state while content is being fetched. This provides better user feedback during asynchronous operations.
+
+  **Components affected**:
+  - `ListAction`
+
+  **Developer changes**:
+
+  Use the `loading` prop to show a loading state:
+
+  ```tsx
+  <List>
+    <ListItem heading="Account details" />
+    <ListAction heading="View transactions" loading={isLoading} onPress={handlePress} />
+  </List>
+  ```
+
+  When `loading` is true, the action will display skeleton placeholders instead of the heading and icon.
+
+- [#862](https://github.com/utilitywarehouse/hearth/pull/862) [`654552e`](https://github.com/utilitywarehouse/hearth/commit/654552e33d56e4b2b2ba8fb783b7f9a7c57ba212) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `invalidText` prop to `List` component
+
+  The `List` component now supports an `invalidText` prop for displaying validation error messages in the section header. This provides consistent validation feedback across list-based forms and grouped content.
+
+  **Components affected**:
+  - `List`
+
+  **Developer changes**:
+
+  Use the `invalidText` prop to display validation errors:
+
+  ```tsx
+  <List
+    heading="Payment methods"
+    helperText="Select at least one payment method"
+    invalidText="You must select a payment method"
+  >
+    <ListItem heading="Credit card" />
+    <ListItem heading="Direct debit" />
+  </List>
+  ```
+
+### Patch Changes
+
+- [#845](https://github.com/utilitywarehouse/hearth/pull/845) [`9c034f9`](https://github.com/utilitywarehouse/hearth/commit/9c034f98f9d6aa4596a45296d02e01703ef1c762) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add `invalidText` prop to `ExpandableCardGroup`
+
+  The `ExpandableCardGroup` component now supports an `invalidText` prop that displays validation text below the helper text when the group is in an invalid state.
+
+  **Components affected**:
+  - `ExpandableCardGroup`
+
+  **Developer changes**:
+
+  No changes required. If you want to display validation text, you can now use the `invalidText` prop:
+
+  ```tsx
+  <ExpandableCardGroup
+    heading="Select an option"
+    helperText="Choose one of the options below"
+    invalidText="Please select at least one option"
+  >
+    {/* ExpandableCard components */}
+  </ExpandableCardGroup>
+  ```
+
+- [#867](https://github.com/utilitywarehouse/hearth/pull/867) [`9a15eb8`](https://github.com/utilitywarehouse/hearth/commit/9a15eb8c659aa541988da6f28f6c50261f3557f9) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Improve first-item border detection in `Card` and `List` components
+
+  The `Card` and `List` components now use a more reliable method to detect and style the first rendered `CardAction`, `ListItem`, or `ListAction`. This fixes edge cases where wrapper components that conditionally render `null` would previously interfere with first-item border removal.
+
+  **Components affected**:
+  - `Card` / `CardAction`
+  - `List` / `ListItem` / `ListAction`
+
+  **Developer changes**:
+
+  No changes required. The improvement is automatic and maintains the same visual behavior. Components that wrap card actions or list items will now work correctly even when some wrappers return `null` conditionally.
+
+  **Note**: The `useCardFirstActionContext` hook has been removed as it was an internal implementation detail.
+
 ## 0.16.2
 
 ### Patch Changes

package/build/components/Card/CardAction/CardActionRoot.js

@@ -1,11 +1,12 @@
 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, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { IconContainer } from '../../IconContainer';
 import { Skeleton } from '../../Skeleton';
 import { useCardContext } from '../Card.context';
+import { useCardActionsContext } from '../CardActions.context';
 import { CardActionContext } from './CardAction.context';
 import CardActionContent from './CardActionContent';
 import CardActionHelperText from './CardActionHelperText';
@@ -23,7 +24,16 @@ const CardActionRoot = ({ heading, helperText, leadingContent, trailingContent,
     const testID = props.testID || 'card-action';
     const loadingTestID = isLoading ? `${testID}-loading` : testID;
     const { variant, hasOnlyActions } = useCardContext();
-    const isFirst = props.isFirst;
+    const actionId = useId();
+    const actionsContext = useCardActionsContext();
+    useLayoutEffect(() => {
+        if (!actionsContext) {
+            return;
+        }
+        return actionsContext.registerAction(actionId);
+    }, [actionId, actionsContext]);
+    const isFirstFromContext = actionsContext?.firstActionId === actionId;
+    const isFirst = props.isFirst ?? isFirstFromContext;
     styles.useVariants({
         showPressed,
         active,

package/build/components/Card/CardActions.context.d.ts

@@ -0,0 +1,6 @@
+export interface CardActionsContextValue {
+    firstActionId?: string;
+    registerAction: (id: string) => () => void;
+}
+export declare const CardActionsContext: import("react").Context<CardActionsContextValue | null>;
+export declare const useCardActionsContext: () => CardActionsContextValue | null;

package/build/components/Card/CardActions.context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const CardActionsContext = createContext(null);
+export const useCardActionsContext = () => {
+    return useContext(CardActionsContext);
+};

package/build/components/Card/CardActions.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+declare const CardActions: {
+    ({ children, style, ...props }: PropsWithChildren<ViewProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardActions;

package/build/components/Card/CardActions.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { CardActionsContext } from './CardActions.context';
+const CardActions = ({ children, style, ...props }) => {
+    const orderRef = useRef([]);
+    const [firstActionId, setFirstActionId] = useState(undefined);
+    const registerAction = useCallback((id) => {
+        if (!orderRef.current.includes(id)) {
+            orderRef.current.push(id);
+        }
+        const nextFirst = orderRef.current[0];
+        setFirstActionId(prev => (prev === nextFirst ? prev : nextFirst));
+        return () => {
+            orderRef.current = orderRef.current.filter(currentId => currentId !== id);
+            const nextFirst = orderRef.current[0];
+            setFirstActionId(prev => (prev === nextFirst ? prev : nextFirst));
+        };
+    }, []);
+    return (_jsx(CardActionsContext.Provider, { value: { firstActionId, registerAction }, children: _jsx(View, { ...props, style: [styles.container, style], children: children }) }));
+};
+CardActions.displayName = 'CardActions';
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+});
+export default CardActions;

package/build/components/Card/CardRoot.js

@@ -1,93 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { CardContext } from './Card.context';
+import CardActions from './CardActions';
 import CardContent from './CardContent';
-// Helper to check if children contain specific component types
-const checkForComponentType = (children, displayName) => {
-    return React.Children.toArray(children).some(child => {
-        if (React.isValidElement(child)) {
-            // @ts-expect-error - type
-            if (child.type.displayName === displayName) {
-                return true;
-            }
-            const childProps = child.props;
-            if (childProps.children) {
-                return checkForComponentType(childProps.children, displayName);
-            }
-        }
-        return false;
-    });
-};
-// Helper to filter out specific component types from children
-const filterChildren = (children, excludeDisplayName) => {
-    return React.Children.map(children, child => {
-        if (React.isValidElement(child)) {
-            // @ts-expect-error - type
-            if (child.type.displayName === excludeDisplayName) {
-                return null;
-            }
-            const childProps = child.props;
-            if (childProps.children) {
-                return React.cloneElement(child, {
-                    ...childProps,
-                    children: filterChildren(childProps.children, excludeDisplayName),
-                });
-            }
-        }
-        return child;
-    });
-};
-// Helper to extract specific component types from children
-const extractChildren = (children, includeDisplayName, markFirst = false) => {
-    let isFirstFound = false;
-    return React.Children.map(children, child => {
-        if (React.isValidElement(child)) {
-            // @ts-expect-error - type
-            if (child.type.displayName === includeDisplayName) {
-                const isFirst = markFirst && !isFirstFound;
-                if (isFirst) {
-                    isFirstFound = true;
-                }
-                return markFirst
-                    ? React.cloneElement(child, { ...(child.props || {}), isFirst })
-                    : child;
-            }
-            const childProps = child.props;
-            if (childProps.children) {
-                return extractChildren(childProps.children, includeDisplayName, markFirst);
-            }
-        }
-        return null;
-    });
-};
-// Helper that recursively collects onPress or other defined handlers from descendants
-const collectChildActionHandlers = (children) => React.Children.toArray(children).reduce((handlers, child) => {
-    if (React.isValidElement(child)) {
-        const childProps = child.props;
-        // @ts-expect-error - type
-        if (child.type.displayName === 'CardPressHandler') {
-            const actionChildren = React.Children.toArray(childProps.children);
-            const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
-            const firstChild = actionChildren[0];
-            if (React.isValidElement(firstChild) &&
-                typeof firstChild.props[handlerToInherit] === 'function') {
-                handlers.push(firstChild.props[handlerToInherit]);
-            }
-        }
-        if (childProps.children) {
-            handlers.push(...collectChildActionHandlers(childProps.children));
-        }
-    }
-    return handlers;
-}, []);
+import { checkForComponentType, collectChildActionHandlers, extractCardActions, filterChildren, hasOnlyPotentialActions, } from './helpers';
 const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', shadowColor, noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
-    const hasActions = checkForComponentType(children, 'CardAction');
-    const hasContent = checkForComponentType(children, 'CardContent');
+    const hasActions = checkForComponentType(children, CardActions);
+    const hasContent = checkForComponentType(children, CardContent);
     // Extract style props using our custom hook
     const { computedStyles, remainingProps } = useStyleProps(rest);
     const handlePress = (e) => {
@@ -98,14 +22,9 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', sha
     };
     const inheritChildAction = childActionHandlers.length > 0;
     const showPressed = inheritChildAction || !!onPress;
-    const filteredChildren = !hasContent && hasActions ? filterChildren(children, 'CardAction') : null;
-    // Check if there's any content besides CardActions
-    const hasOnlyActions = hasActions &&
-        !hasContent &&
-        React.Children.toArray(filteredChildren).filter(child => child != null).length === 0;
-    const filteredCardActions = !hasContent && hasActions
-        ? extractChildren(children, 'CardAction', hasOnlyActions)
-        : null;
+    // Check if all children are action groups (CardActions)
+    const potentiallyOnlyActions = hasOnlyPotentialActions(children, CardActions);
+    const hasOnlyActions = potentiallyOnlyActions && !hasContent;
     const context = useMemo(() => ({
         pressed: showPressed && active,
         noPadding,
@@ -118,29 +37,22 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', sha
     styles.useVariants({
         variant,
         colorScheme,
-        noPadding: noPadding || hasActions || hasContent,
+        noPadding: noPadding || hasActions || hasContent || hasOnlyActions,
         active,
         showPressed,
         disabled,
-        space: hasActions || hasContent ? 'none' : space,
+        space: hasActions || hasContent || hasOnlyActions ? 'none' : space,
         shadowColor,
     });
     const renderChildren = () => {
-        // Default: render children as-is
-        if (hasContent || !hasActions) {
+        // Explicit CardContent used - render as-is or Card has only actions (or potential action wrappers) - render children directly
+        if (hasContent || hasOnlyActions || !hasActions) {
             return children;
         }
-        // Card has actions but no explicit CardContent
-        if (hasOnlyActions) {
-            // Only CardActions, no other content - render actions directly
-            return filteredCardActions;
-        }
-        if (filteredChildren) {
-            // Has both actions and other content - wrap content and render actions below
-            return (_jsxs(_Fragment, { children: [_jsx(CardContent, { children: filteredChildren }), filteredCardActions] }));
-        }
-        // Fallback
-        return children;
+        // Has both actions and other content - wrap non-action content and render actions separately
+        const filteredNonActionChildren = filterChildren(children, CardActions);
+        const cardActions = extractCardActions(children, CardActions);
+        return (_jsxs(_Fragment, { children: [_jsx(CardContent, { children: filteredNonActionChildren }), cardActions] }));
     };
     return (_jsx(CardContext.Provider, { value: context, children: _jsx(Pressable, { ...remainingProps, disabled: disabled, style: [styles.card, computedStyles, style], onPress: handlePress, accessible: showPressed, importantForAccessibility: showPressed ? 'yes' : 'no', children: renderChildren() }) }));
 };

package/build/components/Card/helpers.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GestureResponderEvent } from 'react-native';
+export declare const checkForComponentType: (children: React.ReactNode, componentType: React.ComponentType<any>) => boolean;
+export declare const hasContentInChildren: (child: React.ReactNode, actionType: React.ComponentType<any>) => boolean;
+export declare const hasOnlyPotentialActions: (children: React.ReactNode, actionType: React.ComponentType<any>) => boolean;
+export declare const filterChildren: (children: React.ReactNode, excludeComponentType: React.ComponentType<any>) => React.ReactNode;
+export declare const extractCardActions: (children: React.ReactNode, actionType: React.ComponentType<any>) => React.ReactNode;
+export declare const collectChildActionHandlers: (children: React.ReactNode) => Array<(e: GestureResponderEvent) => void>;

package/build/components/Card/helpers.js

@@ -0,0 +1,146 @@
+import React from 'react';
+const getInheritableHandler = (child, handlerToInherit) => {
+    if (!React.isValidElement(child)) {
+        return null;
+    }
+    const childProps = child.props;
+    const isDisabled = !!childProps.disabled || !!childProps.loading;
+    if (isDisabled || typeof childProps[handlerToInherit] !== 'function') {
+        return null;
+    }
+    return childProps[handlerToInherit];
+};
+// Helper to check if children contain specific component types
+export const checkForComponentType = (children, componentType) => {
+    return React.Children.toArray(children).some(child => {
+        if (React.isValidElement(child)) {
+            if (child.type === componentType) {
+                return true;
+            }
+            const childProps = child.props;
+            if (childProps.children) {
+                return checkForComponentType(childProps.children, componentType);
+            }
+        }
+        return false;
+    });
+};
+// Check if a component has "content" in its children (not just actions)
+export const hasContentInChildren = (child, actionType) => {
+    if (!React.isValidElement(child)) {
+        return false;
+    }
+    const childProps = child.props;
+    if (!childProps?.children) {
+        return false;
+    }
+    // Check if children contain anything other than the action type
+    const childrenArray = React.Children.toArray(childProps.children);
+    return childrenArray.some(c => {
+        if (!React.isValidElement(c)) {
+            // Text, numbers, etc - this is content
+            return c != null;
+        }
+        return c.type !== actionType;
+    });
+};
+// Check if all children are CardActions groups
+export const hasOnlyPotentialActions = (children, actionType) => {
+    const childArray = React.Children.toArray(children);
+    if (childArray.length === 0) {
+        return false;
+    }
+    let hasActionCandidate = false;
+    for (const child of childArray) {
+        if (!React.isValidElement(child)) {
+            if (child != null) {
+                return false;
+            }
+            continue;
+        }
+        if (child.type === actionType) {
+            hasActionCandidate = true;
+            continue;
+        }
+        if (checkForComponentType(child, actionType)) {
+            hasActionCandidate = true;
+            continue;
+        }
+        if (typeof child.type === 'string') {
+            return false;
+        }
+        if (hasContentInChildren(child, actionType)) {
+            return false;
+        }
+        return false;
+    }
+    return hasActionCandidate || checkForComponentType(children, actionType);
+};
+// Helper to filter out specific component types from children
+export const filterChildren = (children, excludeComponentType) => {
+    return React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+            if (child.type === excludeComponentType) {
+                return null;
+            }
+            // Check if this child contains the excludeComponentType
+            if (checkForComponentType(child, excludeComponentType)) {
+                return null; // This child or its descendants contain the action
+            }
+            const childProps = child.props;
+            if (childProps.children) {
+                const filteredChildren = filterChildren(childProps.children, excludeComponentType);
+                // Only preserve wrapper if it has non-null children
+                const hasContent = React.Children.toArray(filteredChildren).some(c => c != null);
+                if (!hasContent) {
+                    return null;
+                }
+                return React.cloneElement(child, {
+                    ...childProps,
+                    children: filteredChildren,
+                });
+            }
+        }
+        return child;
+    });
+};
+// Helper to extract only CardActions (preserving wrapper components)
+export const extractCardActions = (children, actionType) => {
+    const recursiveExtract = (children) => {
+        return React.Children.map(children, child => {
+            if (!React.isValidElement(child))
+                return null;
+            // Direct action
+            if (child.type === actionType) {
+                return child;
+            }
+            // If this child contains a CardActions wrapper in its tree, keep it
+            if (checkForComponentType(child, actionType) && !hasContentInChildren(child, actionType)) {
+                return child;
+            }
+            return null;
+        });
+    };
+    return recursiveExtract(children);
+};
+// Helper that recursively collects onPress or other defined handlers from descendants
+export const collectChildActionHandlers = (children) => React.Children.toArray(children).reduce((handlers, child) => {
+    if (React.isValidElement(child)) {
+        const childProps = child.props;
+        // Check using displayName as CardPressHandler might not be directly importable
+        // @ts-expect-error - type
+        if (child.type?.displayName === 'CardPressHandler') {
+            const actionChildren = React.Children.toArray(childProps.children);
+            const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
+            const firstChild = actionChildren[0];
+            const handler = getInheritableHandler(firstChild, handlerToInherit);
+            if (handler) {
+                handlers.push(handler);
+            }
+        }
+        if (childProps.children) {
+            handlers.push(...collectChildActionHandlers(childProps.children));
+        }
+    }
+    return handlers;
+}, []);

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

@@ -1,5 +1,7 @@
 export { default as Card } from './Card';
 export { useCardContext } from './Card.context';
 export * from './CardAction';
+export { default as CardActions } from './CardActions';
+export { default as CardContent } from './CardContent';
 export { default as CardPressHandler } from './CardPressHandler';
 export { useCardPressHandlerContext } from './CardPressHandler.context';

package/build/components/Card/index.js

@@ -1,5 +1,7 @@
 export { default as Card } from './Card';
 export { useCardContext } from './Card.context';
 export * from './CardAction';
+export { default as CardActions } from './CardActions';
+export { default as CardContent } from './CardContent';
 export { default as CardPressHandler } from './CardPressHandler';
 export { useCardPressHandlerContext } from './CardPressHandler.context';

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;