@utilitywarehouse/hearth-react-native 0.4.2 → 0.5.0

package/build/core/themes.d.ts

@@ -464,8 +464,8 @@ export declare const lightTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
+                readonly margin: 16;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 16;
                 readonly paddingTop: 24;
                 readonly width: 360;
             };
@@ -474,7 +474,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 16;
-                readonly margin: 16;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -493,8 +492,8 @@ export declare const lightTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
             };
@@ -503,7 +502,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -522,8 +520,8 @@ export declare const lightTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 48;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 32;
                 readonly width: 1096;
             };
@@ -532,7 +530,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 40;
@@ -1814,8 +1811,8 @@ export declare const darkTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
+                readonly margin: 16;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 16;
                 readonly paddingTop: 24;
                 readonly width: 360;
             };
@@ -1824,7 +1821,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 16;
-                readonly margin: 16;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -1843,8 +1839,8 @@ export declare const darkTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
             };
@@ -1853,7 +1849,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -1872,8 +1867,8 @@ export declare const darkTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 48;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 32;
                 readonly width: 1096;
             };
@@ -1882,7 +1877,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 40;
@@ -3176,8 +3170,8 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
+                    readonly margin: 16;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 16;
                     readonly paddingTop: 24;
                     readonly width: 360;
                 };
@@ -3186,7 +3180,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 16;
-                    readonly margin: 16;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -3205,8 +3198,8 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
                 };
@@ -3215,7 +3208,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -3234,8 +3226,8 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 48;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 32;
                     readonly width: 1096;
                 };
@@ -3244,7 +3236,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 40;
@@ -4526,8 +4517,8 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
+                    readonly margin: 16;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 16;
                     readonly paddingTop: 24;
                     readonly width: 360;
                 };
@@ -4536,7 +4527,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 16;
-                    readonly margin: 16;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -4555,8 +4545,8 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
                 };
@@ -4565,7 +4555,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -4584,8 +4573,8 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 48;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 32;
                     readonly width: 1096;
                 };
@@ -4594,7 +4583,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 40;

package/build/tokens/components/dark/button.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 12;
     };
-    readonly minWidth: 80;
+    readonly minWidth: 30;
     readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;

package/build/tokens/components/dark/button.js

@@ -9,7 +9,7 @@ export default {
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    minWidth: 80,
+    minWidth: 30,
     shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,

package/build/tokens/components/dark/dialog.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly paddingBottom: 12;
     };
     readonly gap: 24;
     readonly padding: 24;

package/build/tokens/components/dark/dialog.js

@@ -8,6 +8,7 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        paddingBottom: 12,
     },
     gap: 24,
     padding: 24,

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

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly colorMode: "dark";
     readonly mode: "dark";
 };
 export default _default;

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

@@ -2,5 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    colorMode: 'dark',
     mode: 'dark',
 };

package/build/tokens/components/dark/toast.d.ts

@@ -4,7 +4,10 @@
 declare const _default: {
     readonly backgroundColor: "#3f3f3f";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 8;
+    readonly gapHorizontal: 16;
     readonly padding: 14;
+    readonly stack: {
+        readonly gapHorizontal: 8;
+    };
 };
 export default _default;

package/build/tokens/components/dark/toast.js

@@ -4,6 +4,9 @@
 export default {
     backgroundColor: '#3f3f3f',
     borderRadius: 8,
-    gapHorizontal: 8,
+    gapHorizontal: 16,
     padding: 14,
+    stack: {
+        gapHorizontal: 8,
+    },
 };

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

@@ -9,7 +9,7 @@ declare const _default: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 12;
     };
-    readonly minWidth: 80;
+    readonly minWidth: 30;
     readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;

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

@@ -9,7 +9,7 @@ export default {
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    minWidth: 80,
+    minWidth: 30,
     shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,

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

@@ -8,6 +8,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly paddingBottom: 12;
     };
     readonly gap: 24;
     readonly padding: 24;

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

@@ -8,6 +8,7 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        paddingBottom: 12,
     },
     gap: 24,
     padding: 24,

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

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly colorMode: "light";
     readonly mode: "light";
 };
 export default _default;

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

@@ -2,5 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    colorMode: 'light',
     mode: 'light',
 };

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

@@ -4,7 +4,10 @@
 declare const _default: {
     readonly backgroundColor: "#101010";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 8;
+    readonly gapHorizontal: 16;
     readonly padding: 14;
+    readonly stack: {
+        readonly gapHorizontal: 8;
+    };
 };
 export default _default;

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

@@ -4,6 +4,9 @@
 export default {
     backgroundColor: '#101010',
     borderRadius: 8,
-    gapHorizontal: 8,
+    gapHorizontal: 16,
     padding: 14,
+    stack: {
+        gapHorizontal: 8,
+    },
 };

package/build/tokens/layout.d.ts

@@ -7,8 +7,8 @@ export declare const mobile: {
         readonly minWidth: 320;
     };
     readonly container: {
+        readonly margin: 16;
         readonly paddingBottom: 32;
-        readonly paddingHorizontal: 16;
         readonly paddingTop: 24;
         readonly width: 360;
     };
@@ -17,7 +17,6 @@ export declare const mobile: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 16;
-        readonly margin: 16;
     };
     readonly spacing: {
         readonly '2xl': 28;
@@ -36,8 +35,8 @@ export declare const tablet: {
         readonly minWidth: 740;
     };
     readonly container: {
+        readonly margin: 32;
         readonly paddingBottom: 32;
-        readonly paddingHorizontal: 32;
         readonly paddingTop: 24;
         readonly width: 744;
     };
@@ -46,7 +45,6 @@ export declare const tablet: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 24;
-        readonly margin: 32;
     };
     readonly spacing: {
         readonly '2xl': 28;
@@ -65,8 +63,8 @@ export declare const desktop: {
         readonly minWidth: 992;
     };
     readonly container: {
+        readonly margin: 32;
         readonly paddingBottom: 48;
-        readonly paddingHorizontal: 32;
         readonly paddingTop: 32;
         readonly width: 1096;
     };
@@ -75,7 +73,6 @@ export declare const desktop: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 24;
-        readonly margin: 32;
     };
     readonly spacing: {
         readonly '2xl': 40;
@@ -95,8 +92,8 @@ declare const layout: {
             readonly minWidth: 320;
         };
         readonly container: {
+            readonly margin: 16;
             readonly paddingBottom: 32;
-            readonly paddingHorizontal: 16;
             readonly paddingTop: 24;
             readonly width: 360;
         };
@@ -105,7 +102,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 16;
-            readonly margin: 16;
         };
         readonly spacing: {
             readonly '2xl': 28;
@@ -124,8 +120,8 @@ declare const layout: {
             readonly minWidth: 740;
         };
         readonly container: {
+            readonly margin: 32;
             readonly paddingBottom: 32;
-            readonly paddingHorizontal: 32;
             readonly paddingTop: 24;
             readonly width: 744;
         };
@@ -134,7 +130,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 24;
-            readonly margin: 32;
         };
         readonly spacing: {
             readonly '2xl': 28;
@@ -153,8 +148,8 @@ declare const layout: {
             readonly minWidth: 992;
         };
         readonly container: {
+            readonly margin: 32;
             readonly paddingBottom: 48;
-            readonly paddingHorizontal: 32;
             readonly paddingTop: 32;
             readonly width: 1096;
         };
@@ -163,7 +158,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 24;
-            readonly margin: 32;
         };
         readonly spacing: {
             readonly '2xl': 40;

package/build/tokens/layout.js

@@ -7,8 +7,8 @@ export const mobile = {
         minWidth: 320,
     },
     container: {
+        margin: 16,
         paddingBottom: 32,
-        paddingHorizontal: 16,
         paddingTop: 24,
         width: 360,
     },
@@ -17,7 +17,6 @@ export const mobile = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 16,
-        margin: 16,
     },
     spacing: {
         '2xl': 28,
@@ -36,8 +35,8 @@ export const tablet = {
         minWidth: 740,
     },
     container: {
+        margin: 32,
         paddingBottom: 32,
-        paddingHorizontal: 32,
         paddingTop: 24,
         width: 744,
     },
@@ -46,7 +45,6 @@ export const tablet = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 24,
-        margin: 32,
     },
     spacing: {
         '2xl': 28,
@@ -65,8 +63,8 @@ export const desktop = {
         minWidth: 992,
     },
     container: {
+        margin: 32,
         paddingBottom: 48,
-        paddingHorizontal: 32,
         paddingTop: 32,
         width: 1096,
     },
@@ -75,7 +73,6 @@ export const desktop = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 24,
-        margin: 32,
     },
     spacing: {
         '2xl': 40,

package/docs/components/AllComponents.web.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
+  BellMediumIcon,
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
   ChevronRightMediumIcon,
@@ -24,6 +25,8 @@ import {
   Box,
   Button,
   Card,
+  Carousel,
+  CarouselItem,
   Center,
   Checkbox,
   CurrencyInput,
@@ -41,6 +44,7 @@ import {
   Icon,
   IconButton,
   IconContainer,
+  IndicatorIconButton,
   InlineLink,
   Input,
   LI,
@@ -49,6 +53,8 @@ import {
   ListItem,
   Modal,
   OL,
+  ProgressStepper,
+  ProgressStep,
   Radio,
   RadioCard,
   RadioCardGroup,
@@ -214,12 +220,63 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Card" link="/?path=/docs/components-card--docs">
             <Center flex={1}>
-              <Card colorScheme="white">
+              <Card colorScheme="neutralStrong">
                 <Heading>I am a card</Heading>
                 <BodyText>And do card stuff.</BodyText>
               </Card>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Carousel" link="/?path=/docs/components-carousel--docs">
+            <Center flex={1}>
+              <Carousel itemWidth={150} centered width={150}>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="blue700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm a carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="purple700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm another carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="green700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm also a carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+              </Carousel>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Center" link="/?path=/docs/primitives-center--docs">
             <Center flex={1}>
               <Center backgroundColor="red400" padding="300" width={200} height={100}>
@@ -330,6 +387,14 @@ const AllComponents: React.FC = () => {
               <Heading>This is a Heading</Heading>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Indicator Icon Button"
+            link="/?path=/docs/components-indicator-icon-button--docs"
+          >
+            <Center flex={1}>
+              <IndicatorIconButton icon={BellMediumIcon} onPress={() => null} indicator={true} />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Icon Button" link="/?path=/docs/components-icon-button--docs">
             <Center flex={1}>
               <IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
@@ -410,8 +475,8 @@ const AllComponents: React.FC = () => {
           <ComponentWrapper name="List" link="/?path=/docs/components-list--docs">
             <Center flex={1} p="300">
               <List>
-                <ListItem text="List Item 1" divider onPress={() => console.log('item pressed')} />
-                <ListItem text="List Item 2" onPress={() => console.log('item pressed')} />
+                <ListItem heading="List Item 1" onPress={() => console.log('item pressed')} />
+                <ListItem heading="List Item 2" onPress={() => console.log('item pressed')} />
               </List>
             </Center>
           </ComponentWrapper>
@@ -445,6 +510,19 @@ const AllComponents: React.FC = () => {
               </OL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Progress Stepper"
+            link="/?path=/docs/components-progress-stepper--docs"
+          >
+            <Center flex={1}>
+              <ProgressStepper>
+                <ProgressStep id="customer-data" state="complete" />
+                <ProgressStep id="shipping-data" state="complete" />
+                <ProgressStep id="payment-data" state="active" />
+                <ProgressStep id="summary" state="incomplete" />
+              </ProgressStepper>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Radio" link="/?path=/docs/forms-radio--docs">
             <Center flex={1}>
               <RadioGroup>
@@ -469,7 +547,11 @@ const AllComponents: React.FC = () => {
             link="/?path=/docs/components-section-header--docs"
           >
             <Center flex={1} p="300">
-              <SectionHeader heading="Heading" helperText="Supporting text" linkText="More" />
+              <SectionHeader
+                heading="Heading"
+                helperText="Supporting text"
+                trailingContent={<Link href="#">More</Link>}
+              />
             </Center>
           </ComponentWrapper>
           <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">