@hero-design/rn 8.52.2-rc2.0 → 8.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.52.2-rc2.0",
+  "version": "8.53.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.6-rc2.0",
+    "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
@@ -47,8 +47,8 @@
     "@babel/preset-typescript": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.42.6-rc2.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.0",
+    "@hero-design/eslint-plugin": "8.42.5",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,12 +64,12 @@
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
-    "eslint-config-hd": "8.42.5-rc2.0",
+    "eslint-config-hd": "8.42.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.5-rc2.0",
+    "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -157,6 +157,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -334,6 +335,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -511,6 +513,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -688,6 +691,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Accordion/__tests__/__snapshots__/StyledAccordion.spec.tsx.snap

@@ -23,6 +23,7 @@ exports[`StyledItemWrapper has correct style when variant is card 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -66,6 +67,7 @@ exports[`StyledItemWrapper has correct style when variant is default 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -313,6 +313,7 @@ exports[`Accordion allows fully controlled 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -646,6 +647,7 @@ exports[`Accordion renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -990,6 +992,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -101,6 +101,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -294,6 +295,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -487,6 +489,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -653,6 +656,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -846,6 +850,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1039,6 +1044,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1180,6 +1186,7 @@ exports[`Alert renders correctly without rounded  1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -197,6 +197,7 @@ exports[`Attachment renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -101,6 +101,7 @@ exports[`StyledAvatar renders correctly with $variant 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -414,6 +415,7 @@ exports[`StyledWrapper renders correctly with $variant 2`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -2613,6 +2613,7 @@ exports[`AvatarStack renders correctly when variant is vertical 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -3022,6 +3023,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -27,6 +27,7 @@ exports[`StyledImage renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -96,6 +97,7 @@ exports[`StyledPressable renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -159,6 +161,7 @@ exports[`StyledText renders correct style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -118,6 +118,7 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -210,6 +211,7 @@ exports[`Avatar prioritizes source over title 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -328,6 +330,7 @@ exports[`Avatar shows title when there is no source 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -60,6 +60,7 @@ exports[`Badge has danger style when intent is danger 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -140,6 +141,7 @@ exports[`Badge has info style when intent is info 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -220,6 +222,7 @@ exports[`Badge has info style when intent is primary 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -300,6 +303,7 @@ exports[`Badge has success style when intent is success 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -380,6 +384,7 @@ exports[`Badge has warning style when intent is warning 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -461,6 +466,7 @@ exports[`Badge renders correctly with custom props 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -48,6 +48,7 @@ exports[`Status Badge renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -121,6 +122,7 @@ exports[`Status Badge renders correctly with intent 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/BottomNavigation/StyledBottomNavigation.tsx

@@ -0,0 +1,60 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../Typography';
+
+const BottomNavigationTab = styled(View)<{ themeVisibility?: boolean }>(
+  ({ themeVisibility }) => ({
+    flex: 1,
+    display: themeVisibility === false ? 'none' : 'flex',
+  })
+);
+
+const BottomNavigationContainer = styled(View)({
+  flex: 1,
+  overflow: 'hidden',
+});
+
+const ContentWrapper = styled(View)({
+  flex: 1,
+});
+
+const BottomBarWrapper = styled(View)<{
+  themeInsets: { top: number; right: number; bottom: number; left: number };
+}>(({ themeInsets, theme }) => ({
+  height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
+  paddingBottom: themeInsets.bottom,
+  paddingLeft: Math.max(themeInsets.left, themeInsets.right),
+  paddingRight: Math.max(themeInsets.left, themeInsets.right),
+  backgroundColor: theme.__hd__.bottomNavigation.colors.background,
+  shadowColor: theme.__hd__.bottomNavigation.colors.shadow,
+  shadowOffset: theme.__hd__.bottomNavigation.shadows.offset,
+  shadowOpacity: theme.__hd__.bottomNavigation.shadows.opacity,
+  shadowRadius: theme.__hd__.bottomNavigation.shadows.radius,
+  elevation: theme.__hd__.bottomNavigation.shadows.elevation,
+}));
+
+const BottomBar = styled(View)({
+  flex: 1,
+  flexDirection: 'row',
+  overflow: 'hidden',
+  alignItems: 'center',
+});
+
+const BottomBarItem = styled(View)({
+  flex: 1,
+  alignItems: 'center',
+});
+
+const StyledBottomBarText = styled(Typography.Caption)(({ theme }) => ({
+  marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop,
+}));
+
+export {
+  BottomBar,
+  BottomBarItem,
+  BottomNavigationTab,
+  BottomNavigationContainer,
+  BottomBarWrapper,
+  ContentWrapper,
+  StyledBottomBarText,
+};