@hero-design/rn 8.52.2-rc2.0 → 8.53.0

package/src/components/Typography/Title/__tests__/__snapshots__/StyledTitle.tsx.snap

@@ -29,6 +29,7 @@ exports[`StyledTitle has body intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -78,6 +79,7 @@ exports[`StyledTitle has danger intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -127,6 +129,7 @@ exports[`StyledTitle has h1 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -176,6 +179,7 @@ exports[`StyledTitle has h1 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -225,6 +229,7 @@ exports[`StyledTitle has h2 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -274,6 +279,7 @@ exports[`StyledTitle has h2 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -323,6 +329,7 @@ exports[`StyledTitle has h3 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -372,6 +379,7 @@ exports[`StyledTitle has h3 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -421,6 +429,7 @@ exports[`StyledTitle has h4 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -470,6 +479,7 @@ exports[`StyledTitle has h4 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -519,6 +529,7 @@ exports[`StyledTitle has h5 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -568,6 +579,7 @@ exports[`StyledTitle has h5 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -617,6 +629,7 @@ exports[`StyledTitle has h6 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -666,6 +679,7 @@ exports[`StyledTitle has h6 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -715,6 +729,7 @@ exports[`StyledTitle has info intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -764,6 +779,7 @@ exports[`StyledTitle has inverted intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -813,6 +829,7 @@ exports[`StyledTitle has primary intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -862,6 +879,7 @@ exports[`StyledTitle has subdued intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -911,6 +929,7 @@ exports[`StyledTitle has success intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -960,6 +979,7 @@ exports[`StyledTitle has warning intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Typography/Title/__tests__/__snapshots__/index.spec.tsx.snap

@@ -30,6 +30,7 @@ exports[`Title has archived intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -80,6 +81,7 @@ exports[`Title has body intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -130,6 +132,7 @@ exports[`Title has danger intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -180,6 +183,7 @@ exports[`Title has disabled intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -230,6 +234,7 @@ exports[`Title has h1 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -280,6 +285,7 @@ exports[`Title has h1 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -330,6 +336,7 @@ exports[`Title has h2 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -380,6 +387,7 @@ exports[`Title has h2 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -430,6 +438,7 @@ exports[`Title has h3 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -480,6 +489,7 @@ exports[`Title has h3 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -530,6 +540,7 @@ exports[`Title has h4 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -580,6 +591,7 @@ exports[`Title has h4 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -630,6 +642,7 @@ exports[`Title has h5 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -680,6 +693,7 @@ exports[`Title has h5 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -730,6 +744,7 @@ exports[`Title has h6 level and neutral typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -780,6 +795,7 @@ exports[`Title has h6 level and playful typeface style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -830,6 +846,7 @@ exports[`Title has info intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -880,6 +897,7 @@ exports[`Title has inverted intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -930,6 +948,7 @@ exports[`Title has primary intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -980,6 +999,7 @@ exports[`Title has secondary intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1030,6 +1050,7 @@ exports[`Title has subdued intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1080,6 +1101,7 @@ exports[`Title has success intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1130,6 +1152,7 @@ exports[`Title has warning intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/index.ts

@@ -18,6 +18,7 @@ import Alert from './components/Alert';
 import Attachment from './components/Attachment';
 import Avatar, { useAvatarColors } from './components/Avatar';
 import Badge from './components/Badge';
+import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
 import Box from './components/Box';
 import Button from './components/Button';
@@ -82,6 +83,7 @@ export {
   Avatar,
   useAvatarColors,
   Badge,
+  BottomNavigation,
   BottomSheet,
   Box,
   Button,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -116,6 +116,15 @@ exports[`theme returns correct theme object 1`] = `
         "text": "#ffffff",
         "warning": "#ac5d00",
       },
+      "fontSizes": {
+        "default": 12,
+      },
+      "fonts": {
+        "default": "BeVietnamPro-SemiBold",
+      },
+      "lineHeights": {
+        "default": 16,
+      },
       "sizes": {
         "height": 20,
         "minWidth": 20,
@@ -128,6 +137,27 @@ exports[`theme returns correct theme object 1`] = `
         "statusPositionTop": -2,
       },
     },
+    "bottomNavigation": {
+      "colors": {
+        "background": "#ffffff",
+        "shadow": "#401960",
+      },
+      "shadows": {
+        "elevation": 10,
+        "offset": {
+          "height": 3,
+          "width": 0,
+        },
+        "opacity": 0.27,
+        "radius": 4.65,
+      },
+      "sizes": {
+        "height": 72,
+      },
+      "space": {
+        "titleMarginTop": 4,
+      },
+    },
     "bottomSheet": {
       "colors": {
         "backdrop": "#000000",
@@ -184,6 +214,15 @@ exports[`theme returns correct theme object 1`] = `
         "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#ffffff",
       },
+      "fontSize": {
+        "default": 18,
+        "textVariant": 16,
+        "utility": 16,
+      },
+      "fonts": {
+        "default": "BeVietnamPro-SemiBold",
+        "utility": "BeVietnamPro-Regular",
+      },
       "lineHeights": {
         "titleOfTextVariant": 22,
       },
@@ -259,6 +298,15 @@ exports[`theme returns correct theme object 1`] = `
       },
     },
     "carousel": {
+      "fontSizes": {
+        "heading": 32,
+      },
+      "fonts": {
+        "heading": "RebondGrotesque-SemiBold",
+      },
+      "lineHeights": {
+        "heading": 44,
+      },
       "space": {
         "footerMarginBottom": 24,
         "footerPaddingHorizontal": 24,
@@ -392,6 +440,14 @@ exports[`theme returns correct theme object 1`] = `
         "subduedText": "#4d6265",
         "text": "#001f23",
       },
+      "fontSizes": {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
       "sizes": {
         "image": 168,
       },
@@ -408,6 +464,18 @@ exports[`theme returns correct theme object 1`] = `
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
+      "fontSizes": {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
+      "lineHeight": {
+        "description": 26,
+        "title": 32,
+      },
       "sizes": {
         "image": 176,
       },
@@ -574,6 +642,18 @@ exports[`theme returns correct theme object 1`] = `
         "error": "#cb300a",
         "mask": "#001f23",
       },
+      "fontSizes": {
+        "cellText": 28,
+        "errorMessage": 12,
+      },
+      "fonts": {
+        "cellText": "BeVietnamPro-SemiBold",
+        "errorMessage": "BeVietnamPro-Regular",
+      },
+      "lineHeights": {
+        "cellText": 36,
+        "errorMessage": 12,
+      },
       "radii": {
         "cell": 8,
         "mask": 999,
@@ -766,6 +846,14 @@ exports[`theme returns correct theme object 1`] = `
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
+      "fontSizes": {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
       "sizes": {
         "image": 176,
       },
@@ -877,6 +965,15 @@ exports[`theme returns correct theme object 1`] = `
         "warning": "#ac5d00",
         "warningBackground": "#fff6eb",
       },
+      "fontSizes": {
+        "default": 12,
+      },
+      "fonts": {
+        "default": "BeVietnamPro-SemiBold",
+      },
+      "lineHeights": {
+        "default": 16,
+      },
       "radii": {
         "default": 4,
       },
@@ -934,7 +1031,12 @@ exports[`theme returns correct theme object 1`] = `
         "text": "#001f23",
       },
       "fontSizes": {
+        "asteriskLabel": 16,
+        "error": 12,
+        "labelInsideTextInput": 16,
+        "maxLength": 12,
         "text": 16,
+        "topLabel": 12,
       },
       "fonts": {
         "text": "BeVietnamPro-Regular",

package/src/theme/components/badge.ts

@@ -11,6 +11,18 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     text: theme.colors.onDarkGlobalSurface,
   };
 
+  const fonts = {
+    default: theme.fonts.neutral.semiBold,
+  };
+
+  const fontSizes = {
+    default: theme.fontSizes.small,
+  };
+
+  const lineHeights = {
+    default: theme.lineHeights.small,
+  };
+
   const sizes = {
     height: theme.fontSizes.small + theme.sizes.small,
     minWidth: theme.fontSizes.small + theme.sizes.small,
@@ -24,7 +36,22 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     statusPositionRight: -theme.space.xxsmall,
   };
 
-  return { colors, sizes, space };
+  return { colors, fonts, fontSizes, sizes, space, lineHeights };
 };
 
+type GetBadgeThemeReturnType = ReturnType<typeof getBadgeTheme>;
+export interface BadgeThemeType extends GetBadgeThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetBadgeThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetBadgeThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetBadgeThemeReturnType['lineHeights'];
+}
 export default getBadgeTheme;

package/src/theme/components/bottomNavigation.ts

@@ -0,0 +1,27 @@
+import type { GlobalTheme } from '../global';
+
+const getBottomNavigationTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.primary,
+    background: theme.colors.defaultGlobalSurface,
+  };
+
+  const sizes = {
+    height: theme.sizes['6xlarge'],
+  };
+
+  const shadows = {
+    offset: { width: 0, height: 3 },
+    opacity: 0.27,
+    radius: 4.65,
+    elevation: 10,
+  };
+
+  const space = {
+    titleMarginTop: theme.space.xsmall,
+  };
+
+  return { colors, shadows, sizes, space };
+};
+
+export default getBottomNavigationTheme;

package/src/theme/components/button.ts

@@ -1,6 +1,17 @@
 import type { GlobalTheme } from '../global';
 
 const getButtonTheme = (theme: GlobalTheme) => {
+  const fonts = {
+    default: theme.fonts.neutral.semiBold,
+    utility: theme.fonts.neutral.regular,
+  };
+
+  const fontSize = {
+    default: theme.fontSizes.xlarge,
+    utility: theme.fontSizes.large,
+    textVariant: theme.fontSizes.large,
+  };
+
   const borderWidth = {
     default: theme.space.xxsmall,
   };
@@ -53,6 +64,8 @@ const getButtonTheme = (theme: GlobalTheme) => {
   return {
     lineHeights,
     borderWidth,
+    fonts,
+    fontSize,
     sizes,
     radii,
     colors,
@@ -60,4 +73,15 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 };
 
+type GetButtonThemeReturnType = ReturnType<typeof getButtonTheme>;
+export interface ButtonThemeType extends GetButtonThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetButtonThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSize: GetButtonThemeReturnType['fontSize'];
+}
 export default getButtonTheme;

package/src/theme/components/carousel.ts

@@ -12,7 +12,34 @@ const getCarouselTheme = (theme: GlobalTheme) => {
     pageControlWrapperHeight: scale(48),
   };
 
-  return { space };
+  const fontSizes = {
+    heading: theme.fontSizes['xxxxxlarge'],
+  };
+
+  const fonts = {
+    heading: theme.fonts.playful.semiBold,
+  };
+
+  const lineHeights = {
+    heading: theme.lineHeights['6xlarge'],
+  };
+
+  return { space, fonts, fontSizes, lineHeights };
 };
 
+type GetCarouselThemeReturnType = ReturnType<typeof getCarouselTheme>;
+export interface CarouselThemeType extends GetCarouselThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetCarouselThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetCarouselThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetCarouselThemeReturnType['lineHeights'];
+}
 export default getCarouselTheme;

package/src/theme/components/empty.ts

@@ -18,7 +18,29 @@ const getEmptyTheme = (theme: GlobalTheme) => {
     invertedSubduedText: theme.colors.onDarkGlobalSurface,
   };
 
-  return { colors, sizes, space };
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts };
 };
 
+type GetEmptyThemeReturnType = ReturnType<typeof getEmptyTheme>;
+export interface EmptyThemeType extends GetEmptyThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetEmptyThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetEmptyThemeReturnType['fontSizes'];
+}
+
 export default getEmptyTheme;