@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

package/.storybook/main.ts

@@ -1,3 +1,5 @@
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
 import remarkGfm from 'remark-gfm';
 import svgr from 'vite-plugin-svgr';
 
@@ -12,9 +14,9 @@ const unistylesPluginOptions = {
 const config = {
   stories: ['../**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@chromatic-com/storybook',
+    getAbsolutePath("@chromatic-com/storybook"),
     {
-      name: '@storybook/addon-docs',
+      name: getAbsolutePath("@storybook/addon-docs"),
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
@@ -23,18 +25,18 @@ const config = {
         },
       },
     },
-    '@storybook/addon-a11y',
-    '@storybook/addon-vitest',
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest"),
   ],
   framework: {
-    name: '@storybook/react-native-web-vite',
+    name: getAbsolutePath("@storybook/react-native-web-vite"),
     options: {
       pluginReactOptions: {
         babel: {
           plugins: [
             ['react-native-unistyles/plugin', unistylesPluginOptions],
             '@babel/plugin-proposal-export-namespace-from',
-            'react-native-reanimated/plugin',
+            'react-native-worklets/plugin',
           ],
         },
       },
@@ -73,3 +75,7 @@ const config = {
   },
 };
 export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.6.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.8.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.6.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.8.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.8.0
+
+### Minor Changes
+
+- [#635](https://github.com/utilitywarehouse/hearth/pull/635) [`4cac2f2`](https://github.com/utilitywarehouse/hearth/commit/4cac2f28c12279557e2133d67cd75783f30c89ff) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Expandable` component
+
+- [#631](https://github.com/utilitywarehouse/hearth/pull/631) [`57b4991`](https://github.com/utilitywarehouse/hearth/commit/57b49912c90dce3d88a699bd50217df08dab601a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Banner` component
+
+- [#636](https://github.com/utilitywarehouse/hearth/pull/636) [`a363352`](https://github.com/utilitywarehouse/hearth/commit/a363352dbfbc44245c64e2a16347463b89ff519a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `ExpandableCard` component
+
+- [#631](https://github.com/utilitywarehouse/hearth/pull/631) [`57b4991`](https://github.com/utilitywarehouse/hearth/commit/57b49912c90dce3d88a699bd50217df08dab601a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `HighlightBanner` component
+
+## 0.7.0
+
+### Minor Changes
+
+- [#613](https://github.com/utilitywarehouse/hearth/pull/613) [`0bdfbe4`](https://github.com/utilitywarehouse/hearth/commit/0bdfbe41ed8b30e5abf49de6ea4cb3a12194921e) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `CardAction` component
+
 ## 0.6.0
 
 ### Minor Changes

package/build/components/Banner/Banner.d.ts

@@ -0,0 +1,6 @@
+import type BannerProps from './Banner.props';
+declare const Banner: {
+    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, colorScheme, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Banner;

package/build/components/Banner/Banner.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Card } from '../Card';
+import { Heading } from '../Heading';
+import { IconContainer } from '../IconContainer';
+import { ThemedImage } from '../ThemedImage';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', colorScheme = 'pig', style, ...props }) => {
+    const hasIllustration = Boolean(illustration);
+    styles.useVariants({ direction, hasIllustration });
+    const renderIconOrImage = () => {
+        if (icon) {
+            return (_jsx(IconContainer, { icon: icon, variant: iconContainerVariant, size: iconContainerSize, color: iconContainerColor, style: styles.media }));
+        }
+        if (illustration) {
+            return (_jsx(ThemedImage, { light: illustration.light, dark: illustration.dark, style: styles.image, accessible: true, accessibilityLabel: heading }));
+        }
+        if (image) {
+            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { light: image.light, dark: image.dark, style: styles.image, accessible: true, accessibilityLabel: heading }) }));
+        }
+        return null;
+    };
+    const renderAction = () => {
+        if (link) {
+            return _jsx(View, { style: styles.action, children: link });
+        }
+        if (button) {
+            return _jsx(View, { style: styles.action, children: button });
+        }
+        return null;
+    };
+    const content = (_jsxs(View, { style: styles.container, children: [renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
+    if (onPress) {
+        return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: styles.pressable, children: content }) }));
+    }
+    return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: content }));
+};
+Banner.displayName = 'Banner';
+const styles = StyleSheet.create(theme => ({
+    card: {},
+    pressable: {
+        width: '100%',
+    },
+    container: {
+        flexDirection: 'row',
+        gap: theme.space.lg,
+        variants: {
+            direction: {
+                horizontal: {
+                    flexDirection: 'row',
+                    alignItems: 'flex-start',
+                },
+                vertical: {
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                },
+            },
+            hasIllustration: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                direction: 'vertical',
+                hasIllustration: false,
+                styles: {
+                    alignItems: 'flex-start',
+                },
+            },
+            {
+                direction: 'vertical',
+                hasIllustration: true,
+                styles: {
+                    alignItems: 'center',
+                },
+            },
+        ],
+    },
+    media: {
+        flexShrink: 0,
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    alignSelf: 'flex-start',
+                },
+            },
+        },
+    },
+    imageWrapper: {
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    width: '100%',
+                },
+            },
+        },
+    },
+    image: {
+        borderRadius: theme.borderRadius.md,
+        borderWidth: theme.borderWidth[1],
+        borderColor: theme.color.border.strong,
+        variants: {
+            direction: {
+                horizontal: { width: 160, height: 95 },
+                vertical: {
+                    width: '100%',
+                    height: 160,
+                },
+            },
+        },
+    },
+    contentContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: theme.space.lg,
+    },
+    textContainer: {
+        flex: 1,
+        gap: theme.space.lg,
+    },
+    heading: {
+        compoundVariants: [
+            {
+                direction: 'vertical',
+                hasIllustration: true,
+                styles: {
+                    textAlign: 'center',
+                },
+            },
+        ],
+    },
+    description: {
+        compoundVariants: [
+            {
+                direction: 'vertical',
+                hasIllustration: true,
+                styles: {
+                    textAlign: 'center',
+                },
+            },
+        ],
+    },
+    action: {
+        alignSelf: 'flex-start',
+    },
+    chevron: {
+        alignSelf: 'center',
+    },
+    closeButton: {
+        alignSelf: 'flex-start',
+    },
+}));
+export default Banner;

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

@@ -0,0 +1,82 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type CardProps from '../Card/Card.props';
+export type BannerDirection = 'horizontal' | 'vertical';
+export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'colorScheme' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
+    /**
+     * Icon component to display in the banner
+     * Mutually exclusive with image
+     */
+    icon?: ComponentType;
+    /**
+     * Icon container variant
+     * @default 'subtle'
+     */
+    iconContainerVariant?: 'subtle' | 'emphasis';
+    /**
+     * Icon container size
+     * @default 'md'
+     */
+    iconContainerSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Icon container color
+     * @default 'pig'
+     */
+    iconContainerColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+    /**
+     * Illustration to display in the banner
+     * Mutually exclusive with icon and image
+     */
+    illustration?: {
+        light: ImageSourcePropType | ReactElement | ComponentType;
+        dark: ImageSourcePropType | ReactElement | ComponentType;
+    };
+    /**
+     * Image to display in the banner
+     * Mutually exclusive with icon and illustration
+     */
+    image?: {
+        light: ImageSourcePropType | ReactElement | ComponentType;
+        dark: ImageSourcePropType | ReactElement | ComponentType;
+    };
+    /**
+     * Heading text
+     */
+    heading: string;
+    /**
+     * Description text
+     */
+    description: string;
+    /**
+     * Layout direction for icon/image and content
+     * @default 'horizontal'
+     */
+    direction?: BannerDirection;
+    /**
+     * Link element to display
+     */
+    link?: ReactElement;
+    /**
+     * Button element to display
+     */
+    button?: ReactElement;
+    /**
+     * Makes the entire banner pressable
+     */
+    onPress?: () => void;
+    /**
+     * Close button handler
+     */
+    onClose?: () => void;
+    /**
+     * Card variant
+     * @default 'subtle'
+     */
+    variant?: 'subtle' | 'emphasis';
+    /**
+     * Color scheme for the banner
+     * @default 'pig'
+     */
+    colorScheme?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+}
+export default BannerProps;

package/build/components/Banner/Banner.props.js

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

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

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

package/build/components/Banner/index.js

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

package/build/components/BottomSheet/BottomSheetBackdrop.js

@@ -5,11 +5,7 @@ import { useTheme } from '../../hooks';
 const StyledBottomSheetBackdrop = withUnistyles(Backdrop);
 const BottomSheetBackdrop = ({ style, ...props }) => {
     const theme = useTheme();
-    return (_jsx(StyledBottomSheetBackdrop
-    // @ts-expect-error - style unistyles error
-    , { 
-        // @ts-expect-error - style unistyles error
-        style: [styles.backdrop, style], opacity: theme.components.overlay.opacity / 100, appearsOnIndex: 0, disappearsOnIndex: -1, ...props }));
+    return (_jsx(StyledBottomSheetBackdrop, { style: [styles.backdrop, style], opacity: theme.components.overlay.opacity / 100, appearsOnIndex: 0, disappearsOnIndex: -1, ...props }));
 };
 const styles = StyleSheet.create(theme => ({
     backdrop: {

package/build/components/BottomSheet/BottomSheetFlatList.js

@@ -9,11 +9,7 @@ const BottomSheetFlatList = ({ style, contentContainerStyle, isModal = true, ...
         isModal,
         handle,
     });
-    return (_jsx(StyledBottomSheetFlatList
-    // @ts-expect-error - style
-    , { 
-        // @ts-expect-error - style
-        style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props }));
+    return (_jsx(StyledBottomSheetFlatList, { style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     container: {},

package/build/components/BottomSheet/BottomSheetHandle.js

@@ -3,11 +3,7 @@ import { BottomSheetHandle as Handle } from '@gorhom/bottom-sheet';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }) => {
-    return (_jsx(StyledBottomSheetHandle
-    // @ts-expect-error - style
-    , { 
-        // @ts-expect-error - style
-        style: [styles.handle, style], indicatorStyle: [styles.indicator, indicatorStyle], ...props }));
+    return (_jsx(StyledBottomSheetHandle, { style: [styles.handle, style], indicatorStyle: [styles.indicator, indicatorStyle], ...props }));
 };
 const styles = StyleSheet.create(theme => ({
     handle: {

package/build/components/BottomSheet/useBottomSheetLogic.d.ts

@@ -9,7 +9,7 @@ interface UseBottomSheetLogicProps<T = any> {
     handleStyle?: ViewStyle;
 }
 declare const useBottomSheetLogic: <T = any>(props: UseBottomSheetLogicProps<T>) => {
-    renderBackdrop: (backDropProps: BottomSheetBackdropProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<React.ReactNode> | null | undefined;
+    renderBackdrop: (backDropProps: BottomSheetBackdropProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
     renderHandle: (handleProps: BottomSheetHandleProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default useBottomSheetLogic;

package/build/components/Button/ButtonIcon.js

@@ -7,7 +7,8 @@ const ButtonIcon = ({ children, ...props }) => {
     const { colorScheme, variant, inverted, disabled } = useButtonContext();
     styles.useVariants({ colorScheme, variant, inverted, disabled });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ButtonIcon.displayName = 'ButtonIcon';

package/build/components/Button/ButtonRoot.js

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 import { ButtonContext } from './Button.context';
 const ButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, onPress, paddingNone = false, ...props }) => {
     const { active, disabled = false } = states || {};
-    const { pressed } = useCardActionContext();
+    const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         variant,
         size,
@@ -79,7 +79,6 @@ const styles = StyleSheet.create(theme => ({
                 ghost: {
                     backgroundColor: 'transparent',
                     borderWidth: 0,
-                    textDecoration: 'underline',
                 },
             },
             size: {
@@ -325,7 +324,6 @@ const styles = StyleSheet.create(theme => ({
                 variant: 'ghost',
                 colorScheme: 'functional',
                 styles: {
-                    textDecorationColor: theme.color.interactive.functional.foreground.subtle,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
@@ -373,7 +371,6 @@ const styles = StyleSheet.create(theme => ({
                 variant: 'ghost',
                 colorScheme: 'affirmative',
                 styles: {
-                    textDecorationColor: theme.color.interactive.affirmative.foreground.subtle,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
@@ -397,7 +394,6 @@ const styles = StyleSheet.create(theme => ({
                 variant: 'ghost',
                 colorScheme: 'destructive',
                 styles: {
-                    textDecorationColor: theme.color.interactive.destructive.foreground.subtle,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,

package/build/components/Button/ButtonText.js

@@ -15,7 +15,10 @@ const styles = StyleSheet.create(theme => ({
                 emphasis: {},
                 solid: {},
                 outline: {},
-                ghost: {},
+                ghost: {
+                    textDecorationStyle: 'solid',
+                    textDecorationLine: 'underline',
+                },
             },
             colorScheme: {
                 highlight: {},

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

@@ -1,5 +1,12 @@
+import CardProps from './Card.props';
 interface CardContextProps {
     pressed?: boolean;
+    noPadding?: boolean;
+    hasActions?: boolean;
+    hasContent?: boolean;
+    hasOnlyActions?: boolean;
+    space?: CardProps['space'];
+    variant?: CardProps['variant'];
 }
 export declare const CardContext: import("react").Context<CardContextProps>;
 export declare const useCardContext: () => CardContextProps;

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

@@ -0,0 +1,9 @@
+export interface ICardActionContext {
+    showPressed: boolean;
+    active?: boolean;
+    loading: boolean;
+    disabled: boolean;
+    size: 'md' | 'lg';
+}
+export declare const CardActionContext: import("react").Context<ICardActionContext>;
+export declare const useCardActionContext: () => ICardActionContext;

package/build/components/Card/{CardAction.context.js → CardAction/CardAction.context.js}

@@ -1,5 +1,11 @@
 import { createContext, useContext } from 'react';
-export const CardActionContext = createContext({});
+export const CardActionContext = createContext({
+    showPressed: false,
+    active: false,
+    loading: false,
+    disabled: false,
+    size: 'md',
+});
 export const useCardActionContext = () => {
     const context = useContext(CardActionContext);
     return context;

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

@@ -0,0 +1,18 @@
+declare const CardAction: import("react").ForwardRefExoticComponent<(((import("./CardAction.props").default & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+    isFirst?: boolean;
+}) & Omit<import("react-native").PressableProps, "children">) & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+}) & import("react").RefAttributes<unknown>>;
+export default CardAction;

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

@@ -0,0 +1,7 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import CardActionRoot from './CardActionRoot';
+const CardAction = createPressable({
+    Root: CardActionRoot,
+});
+CardAction.displayName = 'CardAction';
+export default CardAction;

package/build/components/Card/CardAction/CardAction.props.d.ts

@@ -0,0 +1,63 @@
+import { ComponentType } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import BadgeProps from '../../Badge/Badge.props';
+import { IconContainerProps } from '../../IconContainer';
+interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
+    loading?: boolean;
+    disabled?: boolean;
+    size?: 'md' | 'lg';
+}
+interface CardActionContentProps {
+    heading: string;
+    helperText?: string;
+    badge?: BadgeProps;
+    badgePosition?: 'bottom' | 'middle' | 'right' | 'top';
+    iconContainer?: boolean;
+    iconContainerVariant?: IconContainerProps['variant'];
+    iconContainerColor?: IconContainerProps['color'];
+}
+export interface CardActionWithChildren extends CardActionBaseProps {
+    children: ViewProps['children'];
+    heading?: never;
+    helperText?: never;
+    leadingContent?: never;
+    leadingIcon?: never;
+    trailingContent?: never;
+    trailingIcon?: never;
+    badge?: never;
+    badgePosition?: never;
+    iconContainer?: never;
+    iconContainerVariant?: never;
+    iconContainerColor?: never;
+}
+type CardActionWithLeadingContent = CardActionBaseProps & CardActionContentProps & {
+    children?: never;
+    leadingContent: ViewProps['children'];
+    leadingIcon?: never;
+};
+type CardActionWithLeadingIcon = CardActionBaseProps & CardActionContentProps & {
+    children?: never;
+    leadingContent?: never;
+    leadingIcon: ComponentType;
+};
+type CardActionWithNoLeading = CardActionBaseProps & CardActionContentProps & {
+    children?: never;
+    leadingContent?: never;
+    leadingIcon?: never;
+};
+type CardActionLeadingVariants = CardActionWithLeadingContent | CardActionWithLeadingIcon | CardActionWithNoLeading;
+type CardActionWithTrailingContent = CardActionLeadingVariants & {
+    trailingContent: ViewProps['children'];
+    trailingIcon?: never;
+};
+type CardActionWithTrailingIcon = CardActionLeadingVariants & {
+    trailingContent?: never;
+    trailingIcon: ComponentType;
+};
+type CardActionWithNoTrailing = CardActionLeadingVariants & {
+    trailingContent?: never;
+    trailingIcon?: never;
+};
+type CardActionWithoutChildren = CardActionWithTrailingContent | CardActionWithTrailingIcon | CardActionWithNoTrailing;
+type CardActionProps = CardActionWithChildren | CardActionWithoutChildren;
+export default CardActionProps;

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

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

package/build/components/Card/CardAction/CardActionContent.d.ts

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

package/build/components/Card/CardAction/CardActionContent.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 CardActionContent = ({ children, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
+};
+CardActionContent.displayName = 'CardActionContent';
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default CardActionContent;

package/build/components/Card/CardAction/CardActionHelperText.d.ts

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+const CardActionHelperText = ({ children, ...props }) => {
+    return (_jsx(BodyText, { size: "md", ...props, style: [styles.text, props.style], children: children }));
+};
+CardActionHelperText.displayName = 'CardActionHelperText';
+const styles = StyleSheet.create(theme => ({
+    text: {
+        color: theme.color.text.secondary,
+    },
+}));
+export default CardActionHelperText;