@hero-design/rn 8.54.0 → 8.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.54.0",
+  "version": "8.55.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@emotion/native": "^11.9.3",
+    "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
@@ -33,7 +34,7 @@
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
     "react-native": "^0.71.0",
-    "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
+    "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-safe-area-context": "^3.0.2",
@@ -64,6 +65,7 @@
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
+    "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
@@ -82,7 +84,8 @@
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
-    "ts-jest": "^29.1.1"
+    "ts-jest": "^29.1.1",
+    "typescript": "4.8.4"
   },
   "prettier": "prettier-config-hd"
 }

package/src/components/Tabs/StyledTabs.tsx

@@ -41,7 +41,7 @@ const StyledIndicator = styled(Animated.View)<{ themeWidth: number }>(
     height: theme.__hd__.tabs.sizes.indicator,
     backgroundColor: theme.__hd__.tabs.colors.indicator,
     position: 'absolute',
-    bottom: 0,
+    bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
   })
 );
 

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -129,7 +129,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
           [
             {
               "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 1,
+              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1033,7 +1033,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
           [
             {
               "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 1,
+              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1937,7 +1937,7 @@ exports[`useIsFocused renders correctly 1`] = `
           [
             {
               "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 1,
+              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
         [
           {
             "borderBottomColor": "#e8e9ea",
-            "borderBottomWidth": 1,
+            "borderBottomWidth": 2,
             "paddingHorizontal": 0,
           },
           undefined,

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

@@ -129,7 +129,7 @@ exports[`Tabs renders correctly 1`] = `
           [
             {
               "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 1,
+              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -474,7 +474,7 @@ exports[`Tabs renders correctly 1`] = `
             style={
               {
                 "backgroundColor": "#401960",
-                "bottom": 0,
+                "bottom": -2,
                 "height": 2,
                 "position": "absolute",
                 "transform": [
@@ -793,7 +793,7 @@ exports[`useIsFocused renders correctly 1`] = `
           [
             {
               "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 1,
+              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1138,7 +1138,7 @@ exports[`useIsFocused renders correctly 1`] = `
             style={
               {
                 "backgroundColor": "#401960",
-                "bottom": 0,
+                "bottom": -2,
                 "height": 2,
                 "position": "absolute",
                 "transform": [
@@ -1457,7 +1457,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
           [
             {
               "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 1,
+              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1802,7 +1802,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
             style={
               {
                 "backgroundColor": "#401960",
-                "bottom": 0,
+                "bottom": -2,
                 "height": 2,
                 "position": "absolute",
                 "transform": [

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

@@ -921,7 +921,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "tabs": {
       "borderWidths": {
-        "headerBottom": 1,
+        "headerBottom": 2,
       },
       "colors": {
         "active": "#001f23",
@@ -944,6 +944,7 @@ exports[`theme returns correct theme object 1`] = `
         "itemVerticalPadding": 8,
         "outlineHorizontalPadding": 8,
         "outlineVerticalPadding": 4,
+        "tabIndicatorBottom": -2,
       },
     },
     "tag": {

package/src/theme/components/tabs.ts

@@ -17,6 +17,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
     itemMargin: theme.space.smallMedium,
     outlineHorizontalPadding: theme.space.small,
     outlineVerticalPadding: theme.space.xsmall,
+    tabIndicatorBottom: -theme.space.xxsmall,
   };
 
   const radii = {
@@ -24,7 +25,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
   };
 
   const borderWidths = {
-    headerBottom: theme.borderWidths.base,
+    headerBottom: theme.borderWidths.medium,
   };
 
   const sizes = {

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

@@ -18,6 +18,7 @@ declare const getTabsTheme: (theme: GlobalTheme) => {
         itemMargin: number;
         outlineHorizontalPadding: number;
         outlineVerticalPadding: number;
+        tabIndicatorBottom: number;
     };
     radii: {
         outline: number;