@hero-design/rn 8.12.2 → 8.12.4

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

@@ -80,6 +80,16 @@ Object {
       "fonts": Object {
         "default": "BeVietnamPro-Regular",
       },
+      "lineHeights": Object {
+        "large": 28,
+        "medium": 26,
+        "small": 24,
+        "xlarge": 32,
+        "xxlarge": 44,
+        "xxxlarge": 36,
+        "xxxxlarge": 39,
+        "xxxxxlarge": 42,
+      },
       "radii": Object {
         "rounded": 999,
       },
@@ -110,6 +120,9 @@ Object {
       "fonts": Object {
         "default": "BeVietnamPro-SemiBold",
       },
+      "lineHeights": Object {
+        "default": 20,
+      },
       "sizes": Object {
         "height": 20,
         "minWidth": 20,
@@ -560,6 +573,10 @@ Object {
         "cellText": "BeVietnamPro-SemiBold",
         "errorMessage": "BeVietnamPro-Regular",
       },
+      "lineHeights": Object {
+        "cellText": 36,
+        "errorMessage": 12,
+      },
       "radii": Object {
         "cell": 8,
         "mask": 999,
@@ -982,6 +999,7 @@ Object {
         "medium": 14,
         "small": 12,
         "xlarge": 18,
+        "xsmall": 10,
         "xxxlarge": 24,
         "xxxxlarge": 28,
         "xxxxxlarge": 32,
@@ -1005,6 +1023,7 @@ Object {
         "medium": 22,
         "small": 20,
         "xlarge": 26,
+        "xsmall": 18,
         "xxxlarge": 32,
         "xxxxlarge": 36,
         "xxxxxlarge": 40,

package/src/theme/components/avatar.ts

@@ -35,12 +35,22 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     xxxxlarge: theme.space.xlarge * 1.5,
     xxxxxlarge: theme.space.xxlarge * 1.5,
   };
+  const lineHeights = {
+    small: theme.lineHeights.large,
+    medium: theme.lineHeights.xlarge,
+    large: theme.lineHeights.xxlarge,
+    xlarge: theme.lineHeights.xxxlarge,
+    xxlarge: theme.lineHeights.medium * 2,
+    xxxlarge: theme.lineHeights.large * 1.5,
+    xxxxlarge: theme.lineHeights.xlarge * 1.5,
+    xxxxxlarge: theme.lineHeights.xxlarge * 1.5,
+  };
 
   const radii = {
     rounded: theme.radii.rounded,
   };
 
-  return { colors, sizes, radii, fonts, fontSizes };
+  return { colors, sizes, radii, fonts, fontSizes, lineHeights };
 };
 
 export default getAvatarTheme;

package/src/theme/components/badge.ts

@@ -19,6 +19,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     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,
@@ -32,7 +36,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     statusPositionRight: -theme.space.xxsmall,
   };
 
-  return { colors, fonts, fontSizes, sizes, space };
+  return { colors, fonts, fontSizes, sizes, space, lineHeights };
 };
 
 export default getBadgeTheme;

package/src/theme/components/pinInput.ts

@@ -22,6 +22,10 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     cellText: theme.fontSizes.xxxxlarge,
     errorMessage: theme.fontSizes.small,
   };
+  const lineHeights = {
+    cellText: theme.lineHeights.xxxxlarge,
+    errorMessage: theme.fontSizes.small,
+  };
 
   const sizes = {
     cellWidth: theme.sizes.xxlarge,
@@ -39,7 +43,16 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     mask: theme.radii.rounded,
   };
 
-  return { borderWidths, colors, fonts, fontSizes, sizes, space, radii };
+  return {
+    borderWidths,
+    lineHeights,
+    colors,
+    fonts,
+    fontSizes,
+    sizes,
+    space,
+    radii,
+  };
 };
 
 export default getPinInputTheme;

package/src/theme/components/typography.ts

@@ -15,6 +15,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
+    xsmall: theme.fontSizes.xsmall,
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
@@ -27,6 +28,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   };
 
   const lineHeights = {
+    xsmall: theme.lineHeights.xsmall,
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,

package/src/theme/global/colors/__tests__/__snapshots__/eBens.spec.ts.snap

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#f1e9fb",
+  "highlightedSurface": "#f3e6f6",
   "inactiveOnDefaultGlobalSurface": "#808f91",
   "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#914edf",
-  "primary": "#7622d7",
+  "pressedSurface": "#9d37b5",
+  "primary": "#8505a2",
   "primaryOutline": "#001f23",
-  "secondary": "#9f64e3",
+  "secondary": "#aa50be",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { View, Image, TouchableOpacity, Text } from 'react-native';
+import { View, Image, TouchableOpacity } from 'react-native';
+import { TextProps } from '../Typography/Text';
 declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
 declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
@@ -17,14 +18,12 @@ declare const StyledTextWrapper: import("@emotion/native").StyledComponent<impor
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+declare const StyledText: import("@emotion/native").StyledComponent<TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeSize: ThemeSize;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Badge/StyledBadge.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Animated, Text } from 'react-native';
+import { Animated } from 'react-native';
 declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
 declare type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
@@ -11,12 +11,10 @@ declare const StyledView: import("@emotion/native").StyledComponent<Animated.Ani
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
 }, {}, {}>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+declare const StyledText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {

package/types/components/Empty/StyledEmpty.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 declare type ThemeVariant = 'light' | 'dark';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -7,20 +7,16 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledTitle: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+declare const StyledTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: ThemeVariant;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
-declare const StyledDescription: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+}, {}, {}>;
+declare const StyledDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: ThemeVariant;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 export { StyledWrapper, StyledTitle, StyledDescription };

package/types/components/FAB/StyledFAB.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Text, TouchableHighlight } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import type { TextProps, TouchableHighlightProps } from 'react-native';
 import type { IconProps } from '../Icon';
 declare const StyledFABContainer: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
@@ -12,10 +12,8 @@ declare const StyledFABIcon: import("@emotion/native").StyledComponent<IconProps
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledFABText: import("@emotion/native").StyledComponent<TextProps & {
+declare const StyledFABText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+} & TextProps, {}, {}>;
 export { StyledFABContainer, StyledFABIcon, StyledFABText };

package/types/components/PinInput/StyledPinInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Text, TextInput, View } from 'react-native';
+import { TextInput, View } from 'react-native';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -22,14 +22,12 @@ export declare const StyledCell: import("@emotion/native").StyledComponent<impor
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledCellText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+export declare const StyledCellText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeState: State;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 export declare const StyledSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -66,9 +64,7 @@ export declare const StyledErrorContainer: import("@emotion/native").StyledCompo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledErrorMessage: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+export declare const StyledErrorMessage: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;

package/types/components/Tag/StyledTag.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 declare type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
 declare type ThemeVariant = 'filled' | 'outlined';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
@@ -11,13 +11,11 @@ declare const StyledView: import("@emotion/native").StyledComponent<import("reac
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+declare const StyledText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
     themeVariant: ThemeVariant;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 export { StyledView, StyledText };

package/types/components/Typography/Text/StyledText.d.ts

@@ -4,7 +4,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    themeFontSize: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived';
     themeTypeface: 'neutral' | 'playful';

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    fontSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     /**
      * Font weight of the text.
      */
@@ -32,5 +32,5 @@ export interface TextProps extends NativeTextProps {
      */
     typeface?: 'neutral' | 'playful';
 }
-declare const Text: ({ children, fontSize, fontWeight, intent, typeface, ...nativeProps }: TextProps) => JSX.Element;
+declare const Text: ({ children, fontSize, fontWeight, intent, typeface, allowFontScaling, ...nativeProps }: TextProps) => JSX.Element;
 export default Text;

package/types/theme/components/avatar.d.ts

@@ -34,5 +34,15 @@ declare const getAvatarTheme: (theme: GlobalTheme) => {
         xxxxlarge: number;
         xxxxxlarge: number;
     };
+    lineHeights: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+        xxlarge: number;
+        xxxlarge: number;
+        xxxxlarge: number;
+        xxxxxlarge: number;
+    };
 };
 export default getAvatarTheme;

package/types/theme/components/badge.d.ts

@@ -26,5 +26,8 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         statusPositionTop: number;
         statusPositionRight: number;
     };
+    lineHeights: {
+        default: number;
+    };
 };
 export default getBadgeTheme;

package/types/theme/components/pinInput.d.ts

@@ -4,6 +4,10 @@ declare const getPinInputTheme: (theme: GlobalTheme) => {
         default: number;
         focused: number;
     };
+    lineHeights: {
+        cellText: number;
+        errorMessage: number;
+    };
     colors: {
         default: string;
         mask: string;

package/types/theme/components/typography.d.ts

@@ -14,6 +14,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
     };
     fonts: import("../global/typography").Fonts;
     fontSizes: {
+        xsmall: number;
         small: number;
         medium: number;
         large: number;
@@ -25,6 +26,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         '7xlarge': number;
     };
     lineHeights: {
+        xsmall: number;
         small: number;
         medium: number;
         large: number;