@hero-design/rn 7.14.3-alpha.6 → 7.15.0

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.14.3-alpha.6",
+  "version": "7.15.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "react-native": "src/index.ts",
   "types": "types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
@@ -20,18 +21,18 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.14.2",
+    "@hero-design/colors": "7.15.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"
   },
   "peerDependencies": {
-    "@react-native-community/datetimepicker": "^3.5.2",
     "react": "17.0.2",
     "react-native": "0.65.1",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
+    "@react-native-community/datetimepicker": "^3.5.2",
     "react-native-webview": "^11.15.0"
   },
   "devDependencies": {

package/rollup.config.js

@@ -29,9 +29,6 @@ export default {
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',
     'react-native-webview',
-    'react-native-pager-view',
-    'react-native-vector-icons',
-    'react-dom',
   ],
   plugins: [
     replace({

package/src/components/Avatar/StyledAvatar.tsx

@@ -1,7 +1,14 @@
 import { View, Image, TouchableOpacity, Text } from 'react-native';
 import styled from '@emotion/native';
 
-type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
+type ThemeSize =
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
+  | 'xxlarge'
+  | 'xxxlarge'
+  | 'xxxxlarge';
 type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 
 const StyledPressable = styled(TouchableOpacity)<{
@@ -9,7 +16,7 @@ const StyledPressable = styled(TouchableOpacity)<{
   themeIntent: ThemeIntent;
 }>(({ themeSize, themeIntent, theme }) => ({
   borderWidth: theme.__hd__.avatar.borderWidths.default,
-  borderRadius: theme.__hd__.avatar.radii[themeSize],
+  borderRadius: theme.__hd__.avatar.radii.rounded,
   borderColor: theme.__hd__.avatar.colors[themeIntent],
   width: theme.__hd__.avatar.sizes[themeSize],
   height: theme.__hd__.avatar.sizes[themeSize],
@@ -21,7 +28,7 @@ const StyledView = styled(View)<{
   themeIntent: ThemeIntent;
 }>(({ themeSize, themeIntent, theme }) => ({
   borderWidth: theme.__hd__.avatar.borderWidths.default,
-  borderRadius: theme.__hd__.avatar.radii[themeSize],
+  borderRadius: theme.__hd__.avatar.radii.rounded,
   borderColor: theme.__hd__.avatar.colors[themeIntent],
   width: theme.__hd__.avatar.sizes[themeSize],
   height: theme.__hd__.avatar.sizes[themeSize],

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -36,7 +36,7 @@ exports[`StyledPressable renders correct style 1`] = `
   style={
     Object {
       "borderColor": "#7622d7",
-      "borderRadius": 16,
+      "borderRadius": 999,
       "borderWidth": 1,
       "height": 32,
       "opacity": 1,
@@ -72,7 +72,7 @@ exports[`StyledView renders correct style 1`] = `
     Array [
       Object {
         "borderColor": "#7622d7",
-        "borderRadius": 16,
+        "borderRadius": 999,
         "borderWidth": 1,
         "height": 32,
         "overflow": "hidden",

package/src/components/Avatar/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Avatar renders correctly 1`] = `
     Array [
       Object {
         "borderColor": "#7622d7",
-        "borderRadius": 16,
+        "borderRadius": 999,
         "borderWidth": 1,
         "height": 32,
         "overflow": "hidden",
@@ -56,7 +56,7 @@ exports[`Avatar trigger press function correctly 1`] = `
   style={
     Object {
       "borderColor": "#7622d7",
-      "borderRadius": 16,
+      "borderRadius": 999,
       "borderWidth": 1,
       "height": 32,
       "opacity": 1,

package/src/components/Avatar/index.tsx

@@ -25,7 +25,14 @@ interface AvatarProps extends ViewProps {
    */
   intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
   /** Size of the avatar. */
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  size?:
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xlarge'
+    | 'xxlarge'
+    | 'xxxlarge'
+    | 'xxxxlarge';
   /**
    * Additional style.
    */

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -62,7 +62,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
             Array [
               Object {
                 "borderColor": "#7622d7",
-                "borderRadius": 16,
+                "borderRadius": 999,
                 "borderWidth": 1,
                 "height": 32,
                 "overflow": "hidden",
@@ -607,7 +607,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             Array [
               Object {
                 "borderColor": "#7622d7",
-                "borderRadius": 16,
+                "borderRadius": 999,
                 "borderWidth": 1,
                 "height": 32,
                 "overflow": "hidden",

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

@@ -51,18 +51,21 @@ Object {
         "medium": 18,
         "small": 16,
         "xlarge": 24,
+        "xxlarge": 32,
+        "xxxlarge": 36,
+        "xxxxlarge": 48,
       },
       "radii": Object {
-        "large": 24,
-        "medium": 20,
-        "small": 16,
-        "xlarge": 28,
+        "rounded": 999,
       },
       "sizes": Object {
         "large": 48,
         "medium": 40,
         "small": 32,
         "xlarge": 56,
+        "xxlarge": 64,
+        "xxxlarge": 80,
+        "xxxxlarge": 96,
       },
     },
     "badge": Object {

package/src/theme/components/avatar.ts

@@ -14,6 +14,9 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     medium: theme.space.xxlarge,
     large: theme.space.xxxlarge,
     xlarge: theme.space.xxxxlarge,
+    xxlarge: theme.space.xlarge * 2,
+    xxxlarge: theme.space.xxlarge * 2,
+    xxxxlarge: theme.space.xxxlarge * 2,
   };
 
   const fontSizes = {
@@ -21,13 +24,13 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     medium: theme.fontSizes.xlarge,
     large: theme.fontSizes.xxlarge,
     xlarge: theme.fontSizes.xxxlarge,
+    xxlarge: theme.space.medium * 2,
+    xxxlarge: theme.space.large * 1.5,
+    xxxxlarge: theme.space.xlarge * 1.5,
   };
 
   const radii = {
-    small: theme.space.xlarge / 2,
-    medium: theme.space.xxlarge / 2,
-    large: theme.space.xxxlarge / 2,
-    xlarge: theme.space.xxxxlarge / 2,
+    rounded: theme.radii.rounded,
   };
 
   const borderWidths = {

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

@@ -1,5 +1,5 @@
 import { View, Image, TouchableOpacity, Text } from 'react-native';
-declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
+declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge';
 declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledPressable: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -11,7 +11,7 @@ interface AvatarProps extends ViewProps {
      */
     intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
     /** Size of the avatar. */
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge';
     /**
      * Additional style.
      */