@hero-design/rn 7.14.3-alpha.7 → 7.15.2-alpla.0

package/.turbo/turbo-build.log

@@ -1 +1,12 @@
-@hero-design/rn:build: cache hit, replaying output 920384c3ba157306
+@hero-design/rn:build: cache hit, replaying output a5e31b1d063c2833
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: Dynamic import can only be supported when transforming ES modules to AMD, CommonJS or SystemJS. Only the parser plugin will be enabled.
+@hero-design/rn:build: [BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
+@hero-design/rn:build: [BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 31.2s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.14.3-alpha.7",
+  "version": "7.15.2-alpla.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
+  "react-native": "src/index.ts",
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
@@ -20,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.14.2",
+    "@hero-design/colors": "7.15.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

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 = {