@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

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

@@ -2,6 +2,7 @@
 export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
+export * from './Banner';
 export * from './BodyText';
 export * from './BottomSheet';
 export * from './Box';
@@ -17,11 +18,14 @@ export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
+export * from './Expandable';
+export * from './ExpandableCard';
 export * from './Flex';
 export * from './FormField';
 export * from './Grid';
 export * from './Heading';
 export * from './Helper';
+export * from './HighlightBanner';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
@@ -46,15 +50,7 @@ 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/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/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;