@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

package/build/core/themes.d.ts

@@ -285,6 +285,7 @@ export declare const lightTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly tablet: {
             readonly bodyText: {
@@ -370,6 +371,7 @@ export declare const lightTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly desktop: {
             readonly bodyText: {
@@ -455,6 +457,7 @@ export declare const lightTheme: {
                     readonly lineHeight: 48;
                 };
             };
+            readonly listSpacing: 16;
         };
     };
     readonly layout: {
@@ -464,7 +467,7 @@ export declare const lightTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
-                readonly margin: 16;
+                readonly marginHorizontal: 16;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 360;
@@ -492,7 +495,7 @@ export declare const lightTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
@@ -520,7 +523,7 @@ export declare const lightTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 48;
                 readonly paddingTop: 32;
                 readonly width: 1096;
@@ -1632,6 +1635,7 @@ export declare const darkTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly tablet: {
             readonly bodyText: {
@@ -1717,6 +1721,7 @@ export declare const darkTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly desktop: {
             readonly bodyText: {
@@ -1802,6 +1807,7 @@ export declare const darkTheme: {
                     readonly lineHeight: 48;
                 };
             };
+            readonly listSpacing: 16;
         };
     };
     readonly layout: {
@@ -1811,7 +1817,7 @@ export declare const darkTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
-                readonly margin: 16;
+                readonly marginHorizontal: 16;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 360;
@@ -1839,7 +1845,7 @@ export declare const darkTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
@@ -1867,7 +1873,7 @@ export declare const darkTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 48;
                 readonly paddingTop: 32;
                 readonly width: 1096;
@@ -2991,6 +2997,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly tablet: {
                 readonly bodyText: {
@@ -3076,6 +3083,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly desktop: {
                 readonly bodyText: {
@@ -3161,6 +3169,7 @@ export declare const themes: {
                         readonly lineHeight: 48;
                     };
                 };
+                readonly listSpacing: 16;
             };
         };
         readonly layout: {
@@ -3170,7 +3179,7 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
-                    readonly margin: 16;
+                    readonly marginHorizontal: 16;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 360;
@@ -3198,7 +3207,7 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
@@ -3226,7 +3235,7 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 48;
                     readonly paddingTop: 32;
                     readonly width: 1096;
@@ -4338,6 +4347,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly tablet: {
                 readonly bodyText: {
@@ -4423,6 +4433,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly desktop: {
                 readonly bodyText: {
@@ -4508,6 +4519,7 @@ export declare const themes: {
                         readonly lineHeight: 48;
                     };
                 };
+                readonly listSpacing: 16;
             };
         };
         readonly layout: {
@@ -4517,7 +4529,7 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
-                    readonly margin: 16;
+                    readonly marginHorizontal: 16;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 360;
@@ -4545,7 +4557,7 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
@@ -4573,7 +4585,7 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 48;
                     readonly paddingTop: 32;
                     readonly width: 1096;

package/build/hooks/useColorMode.d.ts

@@ -1,2 +1,2 @@
-declare const useColorMode: () => readonly ["light" | "dark", import("react").Dispatch<import("react").SetStateAction<"light" | "dark">>];
+declare const useColorMode: () => readonly ["light" | "dark", (mode: "light" | "dark") => void];
 export default useColorMode;

package/build/hooks/useColorMode.js

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

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

@@ -30,5 +30,24 @@ declare const _default: {
         readonly padding: 16;
     };
     readonly imageContainerBorderColor: "#ebebeb";
+    readonly banner: {
+        readonly illustration: {
+            readonly lg: {
+                readonly width: 100;
+            };
+            readonly md: {
+                readonly width: 80;
+            };
+            readonly sm: {
+                readonly width: 60;
+            };
+            readonly xl: {
+                readonly width: 120;
+            };
+            readonly xs: {
+                readonly width: 40;
+            };
+        };
+    };
 };
 export default _default;

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

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

package/build/tokens/components/dark/card-action.d.ts

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

package/build/tokens/components/dark/card-action.js

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

package/build/tokens/components/dark/card-content.d.ts

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

package/build/tokens/components/dark/card-content.js

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

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

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

package/build/tokens/components/dark/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/dark/illustrations.d.ts

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

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

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

package/build/tokens/components/dark/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/dark/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/components/light/banner.d.ts

@@ -30,5 +30,24 @@ declare const _default: {
         readonly padding: 16;
     };
     readonly imageContainerBorderColor: "#101010";
+    readonly banner: {
+        readonly illustration: {
+            readonly lg: {
+                readonly width: 100;
+            };
+            readonly md: {
+                readonly width: 80;
+            };
+            readonly sm: {
+                readonly width: 60;
+            };
+            readonly xl: {
+                readonly width: 120;
+            };
+            readonly xs: {
+                readonly width: 40;
+            };
+        };
+    };
 };
 export default _default;

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

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

package/build/tokens/components/light/card-action.d.ts

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

package/build/tokens/components/light/card-action.js

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

package/build/tokens/components/light/card-content.d.ts

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

package/build/tokens/components/light/card-content.js

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

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

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

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';