@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

package/src/components/Card/CardAction/CardActionRoot.tsx

@@ -0,0 +1,258 @@
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useMemo } from 'react';
+import { Pressable, View, ViewStyle } 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, ICardActionContext } from './CardAction.context';
+import type CardActionProps from './CardAction.props';
+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
+}: CardActionProps & { states?: { active?: boolean; disabled?: boolean }; isFirst?: boolean }) => {
+  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: ICardActionContext = useMemo(() => {
+    return {
+      showPressed,
+      active: active || false,
+      loading: isLoading || false,
+      disabled: isDisabled,
+      size,
+    };
+  }, [active, showPressed, isLoading, isDisabled, size]);
+
+  if (loading) {
+    return (
+      <Pressable
+        {...props}
+        testID={loadingTestID}
+        style={[styles.container, styles.alignCenter, props.style as ViewStyle]}
+        disabled={isDisabled}
+      >
+        {leadingContent || leadingIcon ? (
+          <Skeleton width={24} height={24} style={styles.alignCenter} />
+        ) : null}
+        <CardActionContent>
+          <Skeleton width="80%" height={24} borderRadius="xs" />
+          <Skeleton width="100%" height={24} borderRadius="xs" />
+        </CardActionContent>
+        {trailingIcon || trailingContent ? (
+          <Skeleton width={24} height={24} borderRadius="xs" style={styles.alignCenter} />
+        ) : null}
+      </Pressable>
+    );
+  }
+
+  return (
+    <CardActionContext.Provider value={value}>
+      <Pressable
+        {...props}
+        testID={testID}
+        style={[styles.container, props.style as ViewStyle]}
+        disabled={isDisabled}
+        accessibilityRole={onPress ? 'button' : undefined}
+      >
+        {children ? (
+          children
+        ) : (
+          <>
+            {leadingIcon && iconContainer ? (
+              <View style={styles.iconContainerWrap}>
+                <IconContainer
+                  style={styles.iconContainer}
+                  icon={leadingIcon}
+                  variant={iconContainerVariant}
+                  color={iconContainerColor}
+                  radiusNone
+                />
+              </View>
+            ) : null}
+            <View style={styles.withIconContainer}>
+              {leadingContent ? (
+                <CardActionLeadingContent>{leadingContent}</CardActionLeadingContent>
+              ) : null}
+              {leadingIcon && !iconContainer && !leadingContent ? (
+                <CardActionLeadingContent>
+                  <CardActionIcon as={leadingIcon} />
+                </CardActionLeadingContent>
+              ) : null}
+              <CardActionContent>
+                {badgePosition === 'top' && badge ? <Badge {...badge} /> : null}
+                <CardActionText>{heading}</CardActionText>
+                {badgePosition === 'middle' && badge ? <Badge {...badge} /> : null}
+                {helperText ? <CardActionHelperText>{helperText}</CardActionHelperText> : null}
+                {badgePosition === 'bottom' && badge ? <Badge {...badge} /> : null}
+              </CardActionContent>
+              {badgePosition === 'right' && badge ? (
+                <Badge {...badge} style={[badge.style, styles.alignCenter]} />
+              ) : null}
+              {trailingContent ? (
+                <CardActionTrailingContent>{trailingContent}</CardActionTrailingContent>
+              ) : null}
+              {trailingIcon && !trailingContent ? (
+                <CardActionTrailingContent>
+                  <CardActionTrailingIcon as={trailingIcon} />
+                </CardActionTrailingContent>
+              ) : null}
+            </View>
+          </>
+        )}
+      </Pressable>
+    </CardActionContext.Provider>
+  );
+};
+
+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/src/components/Card/CardAction/CardActionText.tsx

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

package/src/components/Card/CardAction/CardActionTrailingContent.tsx

@@ -0,0 +1,9 @@
+import { View, type ViewProps } from 'react-native';
+
+const CardActionTrailingContent = ({ children, ...props }: ViewProps) => (
+  <View {...props}>{children}</View>
+);
+
+CardActionTrailingContent.displayName = 'CardActionTrailingContent';
+
+export default CardActionTrailingContent;

package/src/components/Card/CardAction/CardActionTrailingIcon.tsx

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react';
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon, IconProps } from '../../Icon';
+
+const CardActionTrailingIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) => {
+  return (
+    <Icon
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
+          : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
+      }
+    >
+      {children}
+    </Icon>
+  );
+};
+
+CardActionTrailingIcon.displayName = 'CardActionTrailingIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    color: theme.color.icon.primary,
+    minWidth: 20,
+    minHeight: 20,
+  },
+}));
+
+export default CardActionTrailingIcon;

package/src/components/Card/CardAction/index.ts

@@ -0,0 +1,10 @@
+export { default as CardAction } from './CardAction';
+export { useCardActionContext } from './CardAction.context';
+export type { default as CardActionProps } from './CardAction.props';
+export { default as CardActionContent } from './CardActionContent';
+export { default as CardActionHelperText } from './CardActionHelperText';
+export { default as CardActionIcon } from './CardActionIcon';
+export { default as CardActionLeadingContent } from './CardActionLeadingContent';
+export { default as CardActionText } from './CardActionText';
+export { default as CardActionTrailingContent } from './CardActionTrailingContent';
+export { default as CardActionTrailingIcon } from './CardActionTrailingIcon';

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,40 @@
+import { View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useCardContext } from './Card.context';
+
+const CardContent = ({ children, style, ...props }: ViewProps) => {
+  const { noPadding, space } = useCardContext();
+  styles.useVariants({
+    noPadding,
+    space,
+  });
+  return (
+    <View style={[styles.container, style]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+CardContent.displayName = 'CardContent';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      space: theme.globalStyle.variants.space,
+      noPadding: {
+        true: {
+          padding: theme.components.card.mobile.paddingNone,
+        },
+        false: {
+          padding: {
+            base: theme.components.card.mobile.padding,
+            md: theme.components.card.tablet.padding,
+            lg: theme.components.card.desktop.padding,
+          },
+        },
+      },
+    },
+  },
+}));
+
+export default CardContent;

package/src/components/Card/CardPressHandler.context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+interface CardPressHandlerContextProps {
+  pressed?: boolean;
+}
+
+export const CardPressHandlerContext = createContext<CardPressHandlerContextProps>({});
+
+export const useCardPressHandlerContext = (): CardPressHandlerContextProps => {
+  const context = useContext(CardPressHandlerContext);
+  return context;
+};

package/src/components/Card/CardPressHandler.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren, useMemo } from 'react';
+import { useCardContext } from './Card.context';
+import { CardPressHandlerContext } from './CardPressHandler.context';
+
+const CardPressHandler = ({ children }: PropsWithChildren<{ handlerToInherit?: string }>) => {
+  const { pressed } = useCardContext();
+  const context = useMemo(
+    () => ({
+      pressed,
+    }),
+    [pressed]
+  );
+  return (
+    <CardPressHandlerContext.Provider value={context}>{children}</CardPressHandlerContext.Provider>
+  );
+};
+
+CardPressHandler.displayName = 'CardPressHandler';
+
+export default CardPressHandler;

package/src/components/Card/CardRoot.tsx

@@ -4,6 +4,72 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { CardContext } from './Card.context';
 import CardProps from './Card.props';
+import CardContent from './CardContent';
+
+// Helper to check if children contain specific component types
+const checkForComponentType = (children: React.ReactNode, displayName: string): boolean => {
+  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 as any;
+      if (childProps.children) {
+        return checkForComponentType(childProps.children, displayName);
+      }
+    }
+    return false;
+  });
+};
+
+// Helper to filter out specific component types from children
+const filterChildren = (children: React.ReactNode, excludeDisplayName: string): React.ReactNode => {
+  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 as any;
+      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: React.ReactNode,
+  includeDisplayName: string,
+  markFirst = false
+): React.ReactNode => {
+  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 } as any)
+          : child;
+      }
+      const childProps = child.props as any;
+      if (childProps.children) {
+        return extractChildren(childProps.children, includeDisplayName, markFirst);
+      }
+    }
+    return null;
+  });
+};
 
 // Helper that recursively collects onPress or other defined handlers from descendants
 const collectChildActionHandlers = (
@@ -14,15 +80,15 @@ const collectChildActionHandlers = (
       if (React.isValidElement(child)) {
         const childProps = child.props as any;
         // @ts-expect-error - type
-        if (child.type.displayName === 'CardAction') {
+        if (child.type.displayName === 'CardPressHandler') {
           const actionChildren = React.Children.toArray(childProps.children);
-          const actionToInherit = childProps['actionToInherit'] || 'onPress';
+          const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
           const firstChild = actionChildren[0];
           if (
             React.isValidElement(firstChild) &&
-            typeof (firstChild.props as any)[actionToInherit] === 'function'
+            typeof (firstChild.props as any)[handlerToInherit] === 'function'
           ) {
-            handlers.push((firstChild.props as any)[actionToInherit]);
+            handlers.push((firstChild.props as any)[handlerToInherit]);
           }
         }
         if (childProps.children) {
@@ -48,6 +114,8 @@ const Card = ({
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
   const childActionHandlers = collectChildActionHandlers(children as ReactNode);
+  const hasActions = checkForComponentType(children as ReactNode, 'CardAction');
+  const hasContent = checkForComponentType(children as ReactNode, 'CardContent');
   // Extract style props using our custom hook
   const { computedStyles, remainingProps } = useStyleProps(rest);
 
@@ -62,22 +130,69 @@ const Card = ({
   const inheritChildAction = childActionHandlers.length > 0;
   const showPressed = inheritChildAction || !!onPress;
 
+  const filteredChildren =
+    !hasContent && hasActions ? filterChildren(children as ReactNode, '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 as ReactNode, 'CardAction', hasOnlyActions)
+      : null;
+
+  const context = useMemo(
+    () => ({
+      pressed: showPressed && active,
+      noPadding,
+      hasActions,
+      hasContent,
+      hasOnlyActions,
+      space,
+      variant,
+    }),
+    [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]
+  );
+
   styles.useVariants({
     variant,
     colorScheme,
-    noPadding,
+    noPadding: noPadding || hasActions || hasContent,
     active,
     showPressed,
     disabled,
-    space,
+    space: hasActions || hasContent ? 'none' : space,
   });
 
-  const context = useMemo(
-    () => ({
-      pressed: showPressed && active,
-    }),
-    [showPressed, active]
-  );
+  const renderChildren = () => {
+    // Default: render children as-is
+    if (hasContent || !hasActions) {
+      return children as ReactNode;
+    }
+
+    // Card has actions but no explicit CardContent
+    if (hasOnlyActions) {
+      // Only CardActions, no other content - render actions directly
+      return filteredCardActions as ReactNode;
+    }
+
+    if (filteredChildren) {
+      // Has both actions and other content - wrap content and render actions below
+      return (
+        <>
+          <CardContent>{filteredChildren as ReactNode}</CardContent>
+          {filteredCardActions as ReactNode}
+        </>
+      );
+    }
+
+    // Fallback
+    return children as ReactNode;
+  };
+
   return (
     <CardContext.Provider value={context}>
       <Pressable
@@ -88,7 +203,7 @@ const Card = ({
         accessible={showPressed}
         importantForAccessibility={showPressed ? 'yes' : 'no'}
       >
-        {children}
+        {renderChildren()}
       </Pressable>
     </CardContext.Provider>
   );

package/src/components/Card/index.ts

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

package/src/components/Checkbox/CheckboxIcon.tsx

@@ -11,7 +11,8 @@ const CheckboxIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as any, style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as ViewStyle, style] as any)
       }
     />

package/src/components/Container/Container.tsx

@@ -37,9 +37,9 @@ const styles = StyleSheet.create(theme => ({
     marginHorizontal:
       typeof extra.margin === 'undefined' && typeof extra.marginHorizontal === 'undefined'
         ? {
-            base: theme.layout.mobile.container.margin,
-            md: theme.layout.tablet.container.margin,
-            lg: theme.layout.desktop.container.margin,
+            base: theme.layout.mobile.container.marginHorizontal,
+            md: theme.layout.tablet.container.marginHorizontal,
+            lg: theme.layout.desktop.container.marginHorizontal,
           }
         : undefined,
     ...extra,

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -82,7 +82,7 @@ const styles = StyleSheet.create(theme => ({
   input: {
     fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
     fontFamily: theme.typography.mobile.detailText.fontFamily,
-    fontWeight: theme.typography.mobile.detailText.fontWeight,
+    fontWeight: `${theme.typography.mobile.detailText.fontWeight}`,
     paddingTop: 0,
     paddingBottom: 0,
     paddingLeft: 0,