@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

package/.storybook/main.ts

@@ -1,4 +1,7 @@
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
 import remarkGfm from 'remark-gfm';
+import svgr from 'vite-plugin-svgr';
 
 const unistylesPluginOptions = {
   autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
@@ -11,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: {
@@ -22,24 +25,39 @@ 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',
           ],
         },
       },
     },
   },
-  viteFinal: config => {
+  viteFinal: async (config: any) => {
+    // Add SVGR plugin for web SVG imports as React components
+    config.plugins = [
+      ...(config.plugins || []),
+      svgr({
+        include: '**/*.svg',
+        svgrOptions: {
+          exportType: 'default',
+          ref: true,
+          svgo: false,
+          titleProp: true,
+          icon: true,
+        },
+      }),
+    ];
+
     return {
       ...config,
       resolve: {
@@ -49,7 +67,15 @@ const config = {
           '@utilitywarehouse/hearth-react-native-icons': '@utilitywarehouse/hearth-react-icons',
         },
       },
+      optimizeDeps: {
+        ...config.optimizeDeps,
+        exclude: [...(config.optimizeDeps?.exclude || []), '@utilitywarehouse/hearth-svg-assets'],
+      },
     };
   },
 };
 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.5.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.7.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.5.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.7.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,19 @@
 # @utilitywarehouse/hearth-react-native
 
+## 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
+
+- [#603](https://github.com/utilitywarehouse/hearth/pull/603) [`3f292e9`](https://github.com/utilitywarehouse/hearth/commit/3f292e9960dc708dd6932cff04671dd7ef375c1a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Container` component
+
+- [#605](https://github.com/utilitywarehouse/hearth/pull/605) [`f52e0f5`](https://github.com/utilitywarehouse/hearth/commit/f52e0f57eff5f1cfa36dacc45576c08771ca12df) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `ThemedImage` component
+
 ## 0.5.0
 
 ### Minor Changes

package/build/components/BottomSheet/BottomSheetBackdrop.js

@@ -6,9 +6,9 @@ const StyledBottomSheetBackdrop = withUnistyles(Backdrop);
 const BottomSheetBackdrop = ({ style, ...props }) => {
     const theme = useTheme();
     return (_jsx(StyledBottomSheetBackdrop
-    // @ts-expect-error - style unistyles error
+    // @ts-expect-error - style prop type issue
     , { 
-        // @ts-expect-error - style unistyles error
+        // @ts-expect-error - style prop type issue
         style: [styles.backdrop, style], opacity: theme.components.overlay.opacity / 100, appearsOnIndex: 0, disappearsOnIndex: -1, ...props }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/components/BottomSheet/BottomSheetFlatList.js

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

package/build/components/BottomSheet/BottomSheetHandle.js

@@ -4,9 +4,9 @@ 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 prop type issue
     , { 
-        // @ts-expect-error - style
+        // @ts-expect-error - style prop type issue
         style: [styles.handle, style], indicatorStyle: [styles.indicator, indicatorStyle], ...props }));
 };
 const styles = StyleSheet.create(theme => ({

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;

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+const CardActionIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
+            : [styles.icon, props.style], children: children }));
+};
+CardActionIcon.displayName = 'CardActionIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.color.icon.primary,
+        width: 24,
+        height: 24,
+    },
+}));
+export default CardActionIcon;

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type CardActionProps from './CardAction.props';
+declare const CardActionRoot: {
+    ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, badge, badgePosition, iconContainer, iconContainerColor, iconContainerVariant, leadingIcon, trailingIcon, size, ...props }: CardActionProps & {
+        states?: {
+            active?: boolean;
+            disabled?: boolean;
+        };
+        isFirst?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardActionRoot;

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

@@ -0,0 +1,155 @@
+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 { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Badge } from '../../Badge';
+import { IconContainer } from '../../IconContainer';
+import { Skeleton } from '../../Skeleton';
+import { useCardContext } from '../Card.context';
+import { CardActionContext } from './CardAction.context';
+import CardActionContent from './CardActionContent';
+import CardActionHelperText from './CardActionHelperText';
+import CardActionIcon from './CardActionIcon';
+import CardActionLeadingContent from './CardActionLeadingContent';
+import CardActionText from './CardActionText';
+import CardActionTrailingContent from './CardActionTrailingContent';
+import CardActionTrailingIcon from './CardActionTrailingIcon';
+const CardActionRoot = ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, badge, badgePosition = 'bottom', iconContainer = true, iconContainerColor, iconContainerVariant, leadingIcon, trailingIcon = ChevronRightSmallIcon, size = 'md', ...props }) => {
+    const { onPress } = props;
+    const { active } = states || { active: false };
+    const isLoading = loading;
+    const showPressed = isLoading ? false : !!onPress;
+    const isDisabled = disabled || false;
+    const testID = props.testID || 'card-action';
+    const loadingTestID = isLoading ? `${testID}-loading` : testID;
+    const { variant, hasOnlyActions } = useCardContext();
+    const isFirst = props.isFirst;
+    styles.useVariants({
+        showPressed,
+        active,
+        disabled: isDisabled || isLoading,
+        showDisabled: disabled,
+        hasIconContainer: !loading && iconContainer,
+        variant,
+        isFirst: hasOnlyActions && isFirst,
+    });
+    const value = useMemo(() => {
+        return {
+            showPressed,
+            active: active || false,
+            loading: isLoading || false,
+            disabled: isDisabled,
+            size,
+        };
+    }, [active, showPressed, isLoading, isDisabled, size]);
+    if (loading) {
+        return (_jsxs(Pressable, { ...props, testID: loadingTestID, style: [styles.container, styles.alignCenter, props.style], disabled: isDisabled, children: [leadingContent || leadingIcon ? (_jsx(Skeleton, { width: 24, height: 24, style: styles.alignCenter })) : null, _jsxs(CardActionContent, { children: [_jsx(Skeleton, { width: "80%", height: 24, borderRadius: "xs" }), _jsx(Skeleton, { width: "100%", height: 24, borderRadius: "xs" })] }), trailingIcon || trailingContent ? (_jsx(Skeleton, { width: 24, height: 24, borderRadius: "xs", style: styles.alignCenter })) : null] }));
+    }
+    return (_jsx(CardActionContext.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: [leadingIcon && iconContainer ? (_jsx(View, { style: styles.iconContainerWrap, children: _jsx(IconContainer, { style: styles.iconContainer, icon: leadingIcon, variant: iconContainerVariant, color: iconContainerColor, radiusNone: true }) })) : null, _jsxs(View, { style: styles.withIconContainer, children: [leadingContent ? (_jsx(CardActionLeadingContent, { children: leadingContent })) : null, leadingIcon && !iconContainer && !leadingContent ? (_jsx(CardActionLeadingContent, { children: _jsx(CardActionIcon, { as: leadingIcon }) })) : null, _jsxs(CardActionContent, { children: [badgePosition === 'top' && badge ? _jsx(Badge, { ...badge }) : null, _jsx(CardActionText, { children: heading }), badgePosition === 'middle' && badge ? _jsx(Badge, { ...badge }) : null, helperText ? _jsx(CardActionHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? _jsx(Badge, { ...badge }) : null] }), badgePosition === 'right' && badge ? (_jsx(Badge, { ...badge, style: [badge.style, styles.alignCenter] })) : null, trailingContent ? (_jsx(CardActionTrailingContent, { children: trailingContent })) : null, trailingIcon && !trailingContent ? (_jsx(CardActionTrailingContent, { children: _jsx(CardActionTrailingIcon, { as: trailingIcon }) })) : null] })] })) }) }));
+};
+CardActionRoot.displayName = 'CardActionRoot';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        paddingVertical: theme.components.cardAction.content.paddingVertical,
+        paddingHorizontal: theme.components.cardAction.content.paddingHorizontal,
+        flexDirection: 'row',
+        gap: theme.components.cardAction.content.gap,
+        borderTopWidth: theme.borderWidth[1],
+        borderColor: theme.color.border.strong,
+        width: '100%',
+        variants: {
+            isFirst: {
+                true: {
+                    borderTopWidth: 0,
+                },
+            },
+            disabled: {
+                true: {
+                    cursor: 'auto',
+                },
+            },
+            variant: {
+                subtle: {
+                    borderColor: theme.color.border.subtle,
+                },
+                emphasis: {
+                    borderColor: theme.color.border.strong,
+                },
+            },
+            hasIconContainer: {
+                true: {
+                    paddingHorizontal: 0,
+                    paddingVertical: 0,
+                    gap: 0,
+                },
+            },
+            showDisabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            showPressed: {
+                true: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                        },
+                    },
+                },
+                false: {
+                    cursor: 'auto',
+                },
+            },
+            active: {
+                true: {},
+            },
+        },
+        compoundVariants: [
+            {
+                showPressed: true,
+                active: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+        ],
+    },
+    withIconContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingVertical: theme.components.list.item.functional.padding,
+        paddingHorizontal: theme.components.list.item.functional.padding,
+        gap: theme.components.list.item.gap,
+        flex: 1,
+        variants: {
+            hasIconContainer: {
+                true: {},
+                false: {
+                    flex: 1,
+                    paddingHorizontal: 0,
+                    paddingVertical: 0,
+                    alignItems: 'center',
+                },
+            },
+        },
+    },
+    alignCenter: {
+        alignSelf: 'center',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        flex: 1,
+        _web: {
+            overflow: 'visible',
+            height: '100%',
+        },
+    },
+    iconContainerWrap: {
+        flexDirection: 'column',
+    },
+}));
+export default CardActionRoot;

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

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

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

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

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

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

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

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