@hero-design/rn 8.34.2-alpha.0 → 8.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.2-alpha.0",
+  "version": "8.34.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,16 +21,13 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.34.1",
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
+    "@hero-design/colors": "8.34.3",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
-    "hero-editor": "^1.9.21",
-    "react-native-root-siblings": "^4.1.1",
-    "rollup-plugin-jsx": "^1.0.3"
+    "hero-editor": "^1.9.21"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
+    "@hero-design/react-native-month-year-picker": "^8.34.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -38,6 +35,7 @@
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
+    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -49,7 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.34.1",
+    "@hero-design/eslint-plugin": "8.34.3",
+    "@hero-design/react-native-month-year-picker": "^8.34.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +64,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.34.1",
+    "eslint-config-hd": "8.34.3",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.34.1",
+    "prettier-config-hd": "8.34.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/rollup.config.js

@@ -35,6 +35,7 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
+    'react-native-root-siblings',
   ],
   plugins: [
     replace({
@@ -42,15 +43,10 @@ export default {
     }),
     nodeResolve({ extensions, browser: true }),
     flow(),
+    commonjs(),
     json(),
     typescript(),
-    babel({
-      exclude: 'node_modules/**',
-      presets: ['@babel/env', '@babel/preset-react'],
-      extensions,
-      babelHelpers: 'bundled',
-    }),
-    commonjs(),
+    babel({ extensions, babelHelpers: 'bundled' }),
     copy({
       targets: [
         {

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

@@ -143,7 +143,7 @@ exports[`Attachment renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "fontSize": 20,
           },
           undefined,

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

@@ -34,7 +34,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 32,
         "left": 0,
@@ -111,7 +111,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 32,
         "left": 22.4,
@@ -188,7 +188,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 32,
         "left": 44.8,
@@ -265,7 +265,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 32,
         "left": 67.19999999999999,
@@ -342,7 +342,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#25006e",
+        "backgroundColor": "#334c4f",
         "borderRadius": 999,
         "height": 32,
         "left": 89.6,
@@ -438,7 +438,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 40,
         "left": 0,
@@ -515,7 +515,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 40,
         "left": 28,
@@ -592,7 +592,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -669,7 +669,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 40,
         "left": 84,

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Badge has danger style when intent is danger 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#de350b",
+      "backgroundColor": "#cb300a",
       "borderRadius": 999,
       "height": 20,
       "justifyContent": "center",
@@ -59,7 +59,7 @@ exports[`Badge has info style when intent is info 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#4568fb",
+      "backgroundColor": "#355bfb",
       "borderRadius": 999,
       "height": 20,
       "justifyContent": "center",
@@ -218,7 +218,7 @@ exports[`Badge has warning style when intent is warning 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#ffa234",
+      "backgroundColor": "#ac5d00",
       "borderRadius": 999,
       "height": 20,
       "justifyContent": "center",

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`Status Badge renders correctly 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 999,
         "height": 8,
         "opacity": 1,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -85,7 +85,7 @@ exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,
@@ -145,7 +145,7 @@ exports[`StyledLoadingIndicator has text-danger style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -489,7 +489,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -521,7 +521,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -553,7 +553,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -831,7 +831,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -863,7 +863,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -895,7 +895,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,

package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -1161,7 +1161,7 @@ exports[`Button renders correctly 13`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "flexShrink": 1,
             "lineHeight": 22,
             "textAlign": "center",
@@ -1244,7 +1244,7 @@ exports[`Button renders correctly 14`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginBottom": 4,
@@ -1276,7 +1276,7 @@ exports[`Button renders correctly 14`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginBottom": 4,
@@ -1308,7 +1308,7 @@ exports[`Button renders correctly 14`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginBottom": 4,

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "stretch",
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 32,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -113,7 +113,7 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
         "alignItems": "center",
         "alignSelf": "stretch",
         "backgroundColor": "transparent",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
@@ -411,7 +411,7 @@ exports[`StyledButtonIcon has outlined-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "fontSize": 20,
         },
         undefined,
@@ -480,7 +480,7 @@ exports[`StyledButtonIcon has text-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "fontSize": 20,
         },
         undefined,
@@ -696,7 +696,7 @@ exports[`StyledButtonText has outlined-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "flexShrink": 1,
           "textAlign": "center",
         },
@@ -789,7 +789,7 @@ exports[`StyledButtonText has text-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "flexShrink": 1,
           "textAlign": "center",
         },

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -764,7 +764,7 @@ exports[`ActionGroup has active true 1`] = `
         "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.4,
+        "opacity": 0.25,
         "position": "absolute",
         "right": 0,
         "top": 0,
@@ -1373,7 +1373,7 @@ exports[`ActionGroup has active true 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#33144d",
           "borderRadius": 999,
           "elevation": 2,
           "flexDirection": "row",

package/src/components/FAB/ActionGroup/index.tsx

@@ -114,7 +114,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     const interpolatedBackdropOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.4],
+        outputRange: [0, 0.25],
       });
 
     const interpolatedActionGroupOpacityAnimation =

package/src/components/FAB/FAB.tsx

@@ -175,6 +175,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
           },
         ]}
         testID={testID}
+        themeActive={active}
       >
         {isIconOnly ? (
           <IconOnlyContent

package/src/components/FAB/StyledFAB.tsx

@@ -6,22 +6,26 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import Box from '../Box';
 
-const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
-  ({ theme }) => ({
-    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
-    borderRadius: theme.radii.rounded,
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-start',
-    padding: theme.__hd__.fab.space.containerPadding,
-    flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
-  })
-);
+const StyledFAB = styled(TouchableHighlight)<
+  TouchableHighlightProps & {
+    themeActive?: boolean;
+  }
+>(({ theme, themeActive }) => ({
+  backgroundColor: themeActive
+    ? theme.__hd__.fab.colors.buttonActiveBackground
+    : theme.__hd__.fab.colors.buttonBackground,
+  borderRadius: theme.radii.rounded,
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  padding: theme.__hd__.fab.space.containerPadding,
+  flexDirection: 'row',
+  elevation: theme.__hd__.fab.shadows.elevation,
+  shadowColor: theme.__hd__.fab.colors.shadow,
+  shadowOffset: theme.__hd__.fab.shadows.offset,
+  shadowRadius: theme.__hd__.fab.shadows.radius,
+  shadowOpacity: theme.__hd__.fab.shadows.opacity,
+}));
 
 const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.icon,

package/src/components/FAB/__tests__/StyledFAB.spec.tsx

@@ -6,7 +6,17 @@ import { StyledFAB, StyledFABIcon } from '../StyledFAB';
 describe('StyledFAB', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledFAB>
+      <StyledFAB themeActive={false}>
+        <Typography.Body variant="small"> button </Typography.Body>
+      </StyledFAB>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledFAB themeActive>
         <Typography.Body variant="small"> button </Typography.Body>
       </StyledFAB>
     );

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -57,6 +57,63 @@ exports[`StyledFAB renders correctly 1`] = `
 </View>
 `;
 
+exports[`StyledFAB renders correctly 2`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#33144d",
+        "borderRadius": 999,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+     button 
+  </Text>
+</View>
+`;
+
 exports[`StyledFABIcon renders correctly 1`] = `
 <HeroIcon
   name="add"

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

@@ -53,7 +53,7 @@ exports[`Icon renders correctly with color and size 1`] = `
   style={
     Array [
       Object {
-        "color": "#de350b",
+        "color": "#cb300a",
         "fontSize": 28,
       },
       undefined,

package/src/components/List/StyledListItem.tsx

@@ -19,6 +19,7 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       ? theme.__hd__.list.colors.checkedListItemContainerBackground
       : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
+    borderRadius: theme.__hd__.list.radii.item,
   };
 
   switch (themeVariant) {
@@ -28,7 +29,6 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       return {
         ...sharedStyles,
         alignItems: 'center',
-        borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.secondaryOutline,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
         shadowOffset: theme.__hd__.list.shadows.cardOffset,

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

@@ -20,6 +20,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -346,6 +347,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -474,6 +476,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -597,6 +600,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

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

@@ -155,6 +155,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -255,6 +256,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     Array [
       Object {
         "backgroundColor": "#ece8ef",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -102,7 +102,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 1,
         "height": 48,
@@ -128,7 +128,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],
@@ -198,7 +198,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 2,
         "height": 48,
@@ -224,7 +224,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],