@utilitywarehouse/hearth-react-native 0.6.0 → 0.7.0

package/build/tokens/components/light/drawer.js

@@ -0,0 +1,28 @@
+/**
+ * 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,
+    },
+};

package/build/tokens/components/light/illustrations.d.ts

@@ -3,6 +3,5 @@
  */
 declare const _default: {
     readonly colorMode: "light";
-    readonly mode: "light";
 };
 export default _default;

package/build/tokens/components/light/illustrations.js

@@ -3,5 +3,4 @@
  */
 export default {
     colorMode: 'light',
-    mode: 'light',
 };

package/build/tokens/components/light/index.d.ts

@@ -11,12 +11,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/build/tokens/components/light/index.js

@@ -11,12 +11,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/build/tokens/layout.d.ts

@@ -7,7 +7,7 @@ export declare const mobile: {
         readonly minWidth: 320;
     };
     readonly container: {
-        readonly margin: 16;
+        readonly marginHorizontal: 16;
         readonly paddingBottom: 32;
         readonly paddingTop: 24;
         readonly width: 360;
@@ -35,7 +35,7 @@ export declare const tablet: {
         readonly minWidth: 740;
     };
     readonly container: {
-        readonly margin: 32;
+        readonly marginHorizontal: 32;
         readonly paddingBottom: 32;
         readonly paddingTop: 24;
         readonly width: 744;
@@ -63,7 +63,7 @@ export declare const desktop: {
         readonly minWidth: 992;
     };
     readonly container: {
-        readonly margin: 32;
+        readonly marginHorizontal: 32;
         readonly paddingBottom: 48;
         readonly paddingTop: 32;
         readonly width: 1096;
@@ -92,7 +92,7 @@ declare const layout: {
             readonly minWidth: 320;
         };
         readonly container: {
-            readonly margin: 16;
+            readonly marginHorizontal: 16;
             readonly paddingBottom: 32;
             readonly paddingTop: 24;
             readonly width: 360;
@@ -120,7 +120,7 @@ declare const layout: {
             readonly minWidth: 740;
         };
         readonly container: {
-            readonly margin: 32;
+            readonly marginHorizontal: 32;
             readonly paddingBottom: 32;
             readonly paddingTop: 24;
             readonly width: 744;
@@ -148,7 +148,7 @@ declare const layout: {
             readonly minWidth: 992;
         };
         readonly container: {
-            readonly margin: 32;
+            readonly marginHorizontal: 32;
             readonly paddingBottom: 48;
             readonly paddingTop: 32;
             readonly width: 1096;

package/build/tokens/layout.js

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

package/build/tokens/typography.d.ts

@@ -85,6 +85,7 @@ export declare const mobile: {
             readonly lineHeight: 36;
         };
     };
+    readonly listSpacing: 16;
 };
 export declare const tablet: {
     readonly bodyText: {
@@ -170,6 +171,7 @@ export declare const tablet: {
             readonly lineHeight: 36;
         };
     };
+    readonly listSpacing: 16;
 };
 export declare const desktop: {
     readonly bodyText: {
@@ -255,6 +257,7 @@ export declare const desktop: {
             readonly lineHeight: 48;
         };
     };
+    readonly listSpacing: 16;
 };
 declare const typography: {
     readonly mobile: {
@@ -341,6 +344,7 @@ declare const typography: {
                 readonly lineHeight: 36;
             };
         };
+        readonly listSpacing: 16;
     };
     readonly tablet: {
         readonly bodyText: {
@@ -426,6 +430,7 @@ declare const typography: {
                 readonly lineHeight: 36;
             };
         };
+        readonly listSpacing: 16;
     };
     readonly desktop: {
         readonly bodyText: {
@@ -511,6 +516,7 @@ declare const typography: {
                 readonly lineHeight: 48;
             };
         };
+        readonly listSpacing: 16;
     };
 };
 export default typography;

package/build/tokens/typography.js

@@ -85,6 +85,7 @@ export const mobile = {
             lineHeight: 36,
         },
     },
+    listSpacing: 16,
 };
 export const tablet = {
     bodyText: {
@@ -170,6 +171,7 @@ export const tablet = {
             lineHeight: 36,
         },
     },
+    listSpacing: 16,
 };
 export const desktop = {
     bodyText: {
@@ -255,6 +257,7 @@ export const desktop = {
             lineHeight: 48,
         },
     },
+    listSpacing: 16,
 };
 const typography = { mobile, tablet, desktop };
 export default typography;

package/docs/components/NextPrevPage.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { StyleSheet, View } from 'react-native';
-import { Card, CardAction, Heading, Link } from '../../src';
+import { Card, CardPressHandler, Heading, Link } from '../../src';
 import { addReactNativePrefix } from '../heplers';
 
 type NextPrevPageProps = {
@@ -34,7 +34,7 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
         {!!prevLink && (
           <Card gap="100">
             {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
-            <CardAction>
+            <CardPressHandler>
               <Link
                 onPress={() => openLink(prevLink)}
                 iconPosition="left"
@@ -42,16 +42,16 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
               >
                 Prev Page
               </Link>
-            </CardAction>
+            </CardPressHandler>
           </Card>
         )}
         <div />
         {!!nextLink && (
           <Card gap="100">
             {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
-            <CardAction>
+            <CardPressHandler>
               <Link onPress={() => openLink(nextLink)}>Next Page</Link>
-            </CardAction>
+            </CardPressHandler>
           </Card>
         )}
       </View>

package/docs/components/VariantTitle.tsx

@@ -1,5 +1,6 @@
 import { ViewProps } from 'react-native';
-import { Box, DetailText, useColorMode } from '../../src';
+import { StyleSheet } from 'react-native-unistyles';
+import { Box, DetailText } from '../../src';
 
 const VariantTitle = ({
   title,
@@ -12,14 +13,10 @@ const VariantTitle = ({
   invert?: boolean;
   children: ViewProps['children'];
 }) => {
-  const [colorMode] = useColorMode();
+  styles.useVariants({ invert });
   return (
     <Box gap="100" w="full">
-      <DetailText
-        textTransform={upperCase ? 'uppercase' : 'none'}
-        size="sm"
-        color={invert ? 'warmWhite50' : colorMode === 'light' ? 'grey600' : 'grey200'}
-      >
+      <DetailText textTransform={upperCase ? 'uppercase' : 'none'} size="sm" style={styles.text}>
         {title}
       </DetailText>
       {children}
@@ -27,4 +24,17 @@ const VariantTitle = ({
   );
 };
 
+const styles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.colorMode === 'light' ? theme.color.grey[600] : theme.color.grey[200],
+    variants: {
+      invert: {
+        true: {
+          color: theme.color.warmWhite[50],
+        },
+      },
+    },
+  },
+}));
+
 export default VariantTitle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,39 +24,41 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@figma/code-connect": "^1.3.3",
-    "@gorhom/bottom-sheet": "5.1.6",
-    "@storybook/addon-a11y": "^9.1.6",
-    "@storybook/addon-docs": "^9.1.6",
-    "@storybook/addon-vitest": "^9.1.6",
-    "@storybook/react-native-web-vite": "^9.1.6",
+    "@gorhom/bottom-sheet": "5.2.6",
+    "@storybook/addon-a11y": "^10.0.5",
+    "@storybook/addon-docs": "^10.0.5",
+    "@storybook/addon-vitest": "^10.0.5",
+    "@storybook/react": "^10.0.5",
+    "@storybook/react-native-web-vite": "^10.0.5",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "9.1.6",
+    "eslint-plugin-storybook": "10.0.5",
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
     "react-native-gesture-handler": "2.26.0",
-    "react-native-nitro-modules": "^0.28.0",
-    "react-native-reanimated": "3.19.1",
+    "react-native-nitro-modules": "^0.31.4",
+    "react-native-reanimated": "4.1.3",
     "react-native-svg": "^15.12.1",
-    "react-native-unistyles": "3.0.10",
+    "react-native-unistyles": "3.0.17",
     "react-native-web": "^0.20.0",
+    "react-native-worklets": "^0.6.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^9.1.6",
+    "storybook": "^10.0.5",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.2",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.2",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
     "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },

package/src/components/BottomSheet/BottomSheetBackdrop.tsx

@@ -1,7 +1,7 @@
 import { BottomSheetBackdrop as Backdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
-import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 
 const StyledBottomSheetBackdrop = withUnistyles(Backdrop);
 
@@ -9,7 +9,7 @@ const BottomSheetBackdrop = ({ style, ...props }: BottomSheetDefaultBackdropProp
   const theme = useTheme();
   return (
     <StyledBottomSheetBackdrop
-      // @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}

package/src/components/BottomSheet/BottomSheetFlatList.tsx

@@ -1,8 +1,7 @@
- 
 import { BottomSheetFlatList as FlatList } from '@gorhom/bottom-sheet';
+import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
-import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 
 const StyledBottomSheetFlatList = withUnistyles(FlatList);
 
@@ -20,7 +19,7 @@ const BottomSheetFlatList = ({
 
   return (
     <StyledBottomSheetFlatList
-      // @ts-expect-error - style
+      // @ts-expect-error - style prop type issue
       style={[styles.container, style]}
       contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
       {...props}

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -7,7 +7,7 @@ const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefaultHandleProps) => {
   return (
     <StyledBottomSheetHandle
-      // @ts-expect-error - style
+      // @ts-expect-error - style prop type issue
       style={[styles.handle, style]}
       indicatorStyle={[styles.indicator, indicatorStyle]}
       {...props}

package/src/components/Button/ButtonIcon.tsx

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

package/src/components/Button/ButtonRoot.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 import { ButtonContext } from './Button.context';
 import type { BaseButtonProps } from './Button.props';
 
@@ -17,7 +17,7 @@ const ButtonRoot = ({
   ...props
 }: BaseButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active, disabled = false } = states || {};
-  const { pressed } = useCardActionContext();
+  const { pressed } = useCardPressHandlerContext();
 
   styles.useVariants({
     variant,
@@ -103,7 +103,6 @@ const styles = StyleSheet.create(theme => ({
         ghost: {
           backgroundColor: 'transparent',
           borderWidth: 0,
-          textDecoration: 'underline',
         },
       },
       size: {
@@ -349,7 +348,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,
@@ -397,7 +395,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,
@@ -421,7 +418,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/src/components/Button/ButtonText.tsx

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

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

@@ -1,7 +1,14 @@
 import { createContext, useContext } from 'react';
+import CardProps from './Card.props';
 
 interface CardContextProps {
   pressed?: boolean;
+  noPadding?: boolean;
+  hasActions?: boolean;
+  hasContent?: boolean;
+  hasOnlyActions?: boolean;
+  space?: CardProps['space'];
+  variant?: CardProps['variant'];
 }
 
 export const CardContext = createContext<CardContextProps>({});