@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

package/src/components/ThemedImage/ThemedImage.tsx

@@ -0,0 +1,34 @@
+import { isValidElement } from 'react';
+import { Image } from 'react-native';
+import useColorMode from '../../hooks/useColorMode';
+import type ThemedImageProps from './ThemedImage.props';
+
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @param ...rest - All other Image props including width/height for SVG components
+ */
+const ThemedImage = ({ light, dark, ...props }: ThemedImageProps) => {
+  const [colorMode] = useColorMode();
+
+  const source = colorMode === 'light' ? light : dark;
+
+  // If the source is a React element (like an SVG component), render it directly
+  if (isValidElement(source)) {
+    return source;
+  }
+
+  // If the source is a component type (function/class), instantiate it with props
+  if (typeof source === 'function') {
+    const Source = source as React.ComponentType<any>;
+    return <Source {...props} />;
+  }
+
+  // Otherwise, render as a regular Image with the source
+  return <Image source={source} {...props} />;
+};
+
+ThemedImage.displayName = 'ThemedImage';
+
+export default ThemedImage;

package/src/components/ThemedImage/index.tsx

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

package/src/components/ToggleButton/ToggleButtonIcon.tsx

@@ -19,7 +19,8 @@ const ButtonIcon = ({
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-ignore
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }
     >

package/src/components/ToggleButton/ToggleButtonRoot.tsx

@@ -1,6 +1,6 @@
 import { GestureResponderEvent, Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 import type { ToggleButtonProps } from './ToggleButton.props';
 
 const ButtonRoot = ({
@@ -12,7 +12,7 @@ const ButtonRoot = ({
   ...props
 }: ToggleButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || {};
-  const { pressed } = useCardActionContext();
+  const { pressed } = useCardPressHandlerContext();
 
   styles.useVariants({
     toggled,

package/src/components/UnstyledIconButton/UnstyledIconButtonIcon.tsx

@@ -12,7 +12,8 @@ const UnstyledIconButtonIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-ignore
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as ViewStyle, props.style]
       }
     >

package/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -42,17 +43,10 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
 
-export {
-  FlatList,
-  Image,
-  KeyboardAvoidingView,
-  ScrollView,
-  SectionList,
-  StatusBar,
-  View,
-} from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 
 export { Pressable } from 'react-native';
 

package/src/core/index.ts

@@ -1,27 +1,30 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { themes } from './themes';
 import { breakpoints } from './breakpoints';
-export * from './themes';
-export * from './breakpoints';
+import { themes } from './themes';
 export {
-  StyleSheet,
-  UnistylesRuntime,
-  withUnistyles,
-  Hide,
+  createUnistylesElement,
   Display,
-  ScopedTheme,
-  mq,
   getServerUnistyles,
-  useUnistyles,
+  Hide,
   hydrateServerUnistyles,
-  useServerUnistyles,
+  mq,
+  NavigationBar,
   resetServerUnistyles,
+  ScopedTheme,
+  StatusBar,
+  StyleSheet,
+  UnistylesRuntime,
+  useServerUnistyles,
+  useUnistyles,
+  withUnistyles,
 } from 'react-native-unistyles';
 export type {
   UnistylesBreakpoints,
   UnistylesThemes,
   UnistylesVariants,
 } from 'react-native-unistyles';
+export * from './breakpoints';
+export * from './themes';
 
 StyleSheet.configure({
   breakpoints,

package/src/hooks/useColorMode.ts

@@ -1,21 +1,18 @@
-import { useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import { UnistylesRuntime, useUnistyles } from 'react-native-unistyles';
 
 const useColorMode = () => {
-  const {
-    theme: { colorMode: themeColorMode },
-  } = useUnistyles();
+  const { theme } = useUnistyles();
 
-  const [colorMode, setColorMode] = useState<'light' | 'dark'>(
-    UnistylesRuntime.themeName as 'light' | 'dark'
+  const setColorModeWrapper = useCallback(
+    (mode: 'light' | 'dark') => {
+      if (mode === theme.colorMode) return;
+      UnistylesRuntime.setTheme(mode);
+    },
+    [theme.colorMode]
   );
 
-  useEffect(() => {
-    if (colorMode === themeColorMode) return;
-    setColorMode(themeColorMode);
-  }, [themeColorMode, colorMode]);
-
-  return [colorMode, setColorMode] as const;
+  return [theme.colorMode, setColorModeWrapper] as const;
 };
 
 export default useColorMode;

package/src/hooks/useStyleProps.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { ViewStyle } from 'react-native';
-import useTheme from './useTheme';
 import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import useTheme from './useTheme';
 
 /**
  * Type for the return value from useStyleProps

package/src/tokens/components/dark/banner.ts

@@ -31,4 +31,23 @@ export default {
     padding: 16,
   },
   imageContainerBorderColor: '#ebebeb',
+  banner: {
+    illustration: {
+      lg: {
+        width: 100,
+      },
+      md: {
+        width: 80,
+      },
+      sm: {
+        width: 60,
+      },
+      xl: {
+        width: 120,
+      },
+      xs: {
+        width: 40,
+      },
+    },
+  },
 } as const;

package/src/tokens/components/dark/card-action.ts

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  content: {
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+} as const;

package/src/tokens/components/dark/card-content.ts

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  banner: {
+    illustration: {
+      lg: {
+        width: 100,
+      },
+      md: {
+        width: 80,
+      },
+      sm: {
+        width: 60,
+      },
+      xl: {
+        width: 120,
+      },
+      xs: {
+        width: 40,
+      },
+    },
+  },
+} as const;

package/src/tokens/components/dark/drawer.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  footer: {
+    horizontal: {
+      gap: 16,
+    },
+    padding: 24,
+    vertical: {
+      gap: 8,
+    },
+  },
+  gap: 20,
+  heading: {
+    gap: 8,
+  },
+  width: 360,
+  mobile: {
+    padding: 16,
+  },
+  tablet: {
+    padding: 24,
+  },
+  desktop: {
+    padding: 24,
+  },
+} as const;

package/src/tokens/components/dark/illustrations.ts

@@ -4,5 +4,4 @@
 
 export default {
   colorMode: 'dark',
-  mode: 'dark',
 } as const;

package/src/tokens/components/dark/index.ts

@@ -12,12 +12,15 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAction } from './card-action';
+export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
 export { default as dialog } from './dialog';
 export { default as divider } from './divider';
+export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';

package/src/tokens/components/light/banner.ts

@@ -31,4 +31,23 @@ export default {
     padding: 16,
   },
   imageContainerBorderColor: '#101010',
+  banner: {
+    illustration: {
+      lg: {
+        width: 100,
+      },
+      md: {
+        width: 80,
+      },
+      sm: {
+        width: 60,
+      },
+      xl: {
+        width: 120,
+      },
+      xs: {
+        width: 40,
+      },
+    },
+  },
 } as const;

package/src/tokens/components/light/card-action.ts

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  content: {
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+} as const;

package/src/tokens/components/light/card-content.ts

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  banner: {
+    illustration: {
+      lg: {
+        width: 100,
+      },
+      md: {
+        width: 80,
+      },
+      sm: {
+        width: 60,
+      },
+      xl: {
+        width: 120,
+      },
+      xs: {
+        width: 40,
+      },
+    },
+  },
+} as const;

package/src/tokens/components/light/drawer.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  footer: {
+    horizontal: {
+      gap: 16,
+    },
+    padding: 24,
+    vertical: {
+      gap: 8,
+    },
+  },
+  gap: 20,
+  heading: {
+    gap: 8,
+  },
+  width: 360,
+  mobile: {
+    padding: 16,
+  },
+  tablet: {
+    padding: 24,
+  },
+  desktop: {
+    padding: 24,
+  },
+} as const;

package/src/tokens/components/light/illustrations.ts

@@ -4,5 +4,4 @@
 
 export default {
   colorMode: 'light',
-  mode: 'light',
 } as const;

package/src/tokens/components/light/index.ts

@@ -12,12 +12,15 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAction } from './card-action';
+export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
 export { default as dialog } from './dialog';
 export { default as divider } from './divider';
+export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';

package/src/tokens/layout.ts

@@ -8,7 +8,7 @@ export const mobile = {
     minWidth: 320,
   },
   container: {
-    margin: 16,
+    marginHorizontal: 16,
     paddingBottom: 32,
     paddingTop: 24,
     width: 360,
@@ -37,7 +37,7 @@ export const tablet = {
     minWidth: 740,
   },
   container: {
-    margin: 32,
+    marginHorizontal: 32,
     paddingBottom: 32,
     paddingTop: 24,
     width: 744,
@@ -66,7 +66,7 @@ export const desktop = {
     minWidth: 992,
   },
   container: {
-    margin: 32,
+    marginHorizontal: 32,
     paddingBottom: 48,
     paddingTop: 32,
     width: 1096,

package/src/tokens/typography.ts

@@ -86,6 +86,7 @@ export const mobile = {
       lineHeight: 36,
     },
   },
+  listSpacing: 16,
 } as const;
 
 export const tablet = {
@@ -172,6 +173,7 @@ export const tablet = {
       lineHeight: 36,
     },
   },
+  listSpacing: 16,
 } as const;
 
 export const desktop = {
@@ -258,6 +260,7 @@ export const desktop = {
       lineHeight: 48,
     },
   },
+  listSpacing: 16,
 } as const;
 
 const typography = { mobile, tablet, desktop } as const;

package/src/vite-env.d.ts

@@ -4,3 +4,9 @@ declare module '*.png' {
   const value: any;
   export default value;
 }
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}

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

@@ -1,6 +0,0 @@
-interface CardActionContextProps {
-    pressed?: boolean;
-}
-export declare const CardActionContext: import("react").Context<CardActionContextProps>;
-export declare const useCardActionContext: () => CardActionContextProps;
-export {};

package/build/components/Card/CardAction.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { CardActionContext } from './CardAction.context';
-import { useCardContext } from './Card.context';
-const CardAction = ({ children }) => {
-    const { pressed } = useCardContext();
-    const context = useMemo(() => ({
-        pressed,
-    }), [pressed]);
-    return _jsx(CardActionContext.Provider, { value: context, children: children });
-};
-CardAction.displayName = 'CardAction';
-export default CardAction;

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

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

package/src/components/Card/CardAction.tsx

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