@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

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/AllComponents.web.tsx

@@ -21,6 +21,7 @@ import {
   AccordionItem,
   Alert,
   Badge,
+  Banner,
   BodyText,
   BottomSheet,
   BottomSheetModal,
@@ -42,10 +43,13 @@ import {
   DescriptionListItem,
   DetailText,
   Divider,
+  Expandable,
+  ExpandableCard,
   Flex,
   FormField,
   Grid,
   Heading,
+  HighlightBanner,
   Icon,
   IconButton,
   IconContainer,
@@ -126,6 +130,7 @@ const AllComponents: React.FC = () => {
   const handleModalOpenPress = useCallback(() => {
     modalRef.current?.present();
   }, []);
+  const [isExpanded, setIsExpanded] = useState(false);
   const [selected, setSelected] = useState<DateType>();
   const datePickerRef = useRef<BottomSheetModal>(null);
   const handleDatePickerOpenPress = useCallback(() => {
@@ -188,6 +193,16 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Banner" link="/?path=/docs/components-banner--docs">
+            <Center flex={1} p="200">
+              <Banner
+                icon={ElectricityMediumIcon}
+                iconContainerColor="energy"
+                heading="I'm a Banner"
+                description="This is a banner description"
+              />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Body Text" link="/?path=/docs/typography-body-text--docs">
             <Center flex={1}>
               <BodyText>This is some Body Text</BodyText>
@@ -361,6 +376,44 @@ const AllComponents: React.FC = () => {
             </Center>
           </ComponentWrapper>
 
+          <ComponentWrapper
+            name="Expandable"
+            link="/?path=/docs/utility-components-expandable--docs"
+          >
+            <Center flex={1} p="200">
+              <Box width={240} gap="100">
+                <Button onPress={() => setIsExpanded(!isExpanded)}>
+                  {isExpanded ? 'Collapse' : 'Expand'}
+                </Button>
+                <Expandable expanded={isExpanded} accessibilityLabel="Expandable content section">
+                  <Card>
+                    <BodyText>This content expands and collapses</BodyText>
+                  </Card>
+                </Expandable>
+              </Box>
+            </Center>
+          </ComponentWrapper>
+
+          <ComponentWrapper
+            name="Expandable Card"
+            link="/?path=/docs/components-expandable-card--docs"
+          >
+            <Center flex={1} p="200">
+              <ExpandableCard
+                heading="This is an"
+                helperText="Expandable Card component"
+                leadingIcon={ElectricityMediumIcon}
+                expandedContent={
+                  <>
+                    <BodyText>I'm expanding</BodyText>
+                    <BodyText>to show more content</BodyText>
+                  </>
+                }
+                style={{ width: 240 }}
+              />
+            </Center>
+          </ComponentWrapper>
+
           <ComponentWrapper name="Flex" link="/?path=/docs/primitives-flex--docs">
             <Center flex={1}>
               <Flex direction="row" space="md">
@@ -400,6 +453,24 @@ const AllComponents: React.FC = () => {
               <Heading>This is a Heading</Heading>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Highlight Banner"
+            link="/?path=/docs/components-highlight-banner--docs"
+          >
+            <Center flex={1} p="200">
+              <HighlightBanner
+                heading="Featured Content"
+                headingColor="energy"
+                imageContainerHeight={40}
+                image={{
+                  source: {
+                    uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
+                  },
+                }}
+                description="Banner description goes here."
+              />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Indicator Icon Button"
             link="/?path=/docs/components-indicator-icon-button--docs"
@@ -529,10 +600,10 @@ const AllComponents: React.FC = () => {
           >
             <Center flex={1} px="300">
               <ProgressStepper>
-                <ProgressStep id="customer-data" state="complete" />
-                <ProgressStep id="shipping-data" state="complete" />
-                <ProgressStep id="payment-data" state="active" />
-                <ProgressStep id="summary" state="incomplete" />
+                <ProgressStep id="customer-data" status="complete" />
+                <ProgressStep id="shipping-data" status="complete" />
+                <ProgressStep id="payment-data" status="active" />
+                <ProgressStep id="summary" status="incomplete" />
               </ProgressStepper>
             </Center>
           </ComponentWrapper>

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.color.text.secondary,
+    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.8.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"
   },