@hero-design/rn 8.36.0 → 8.36.2

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) 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`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 32.5s
+created lib/index.js, es/index.js in 26.5s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1662,6 +1662,21 @@ var getRadii = function getRadii(baseRadius) {
   };
 };
 
+var getShadows = function getShadows(systemPalette) {
+  return {
+    "default": {
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowColor: systemPalette.secondaryOutline,
+      shadowOpacity: 1,
+      shadowRadius: 4,
+      elevation: 10
+    }
+  };
+};
+
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var fonts = getFonts(scale.font);
   var fontSizes = getFontSizes(scale.fontSize);
@@ -1670,6 +1685,7 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var space = getSpace(scale.space);
   var sizes = getSizes(scale.size);
   var radii = getRadii(scale.radius);
+  var shadows = getShadows(systemPalette);
   return {
     colors: _objectSpread2({}, systemPalette),
     fonts: fonts,
@@ -1678,7 +1694,8 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
     borderWidths: borderWidths,
     space: space,
     sizes: sizes,
-    radii: radii
+    radii: radii,
+    shadows: shadows
   };
 };
 
@@ -2416,11 +2433,8 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    cardOffset: {
-      width: 0,
-      height: 2
-    },
-    cardElevation: 10
+    cardOffset: theme.shadows["default"].shadowOffset,
+    cardElevation: theme.shadows["default"].elevation
   };
   var widths = {
     leadingStatus: 8
@@ -2428,7 +2442,7 @@ var getListTheme = function getListTheme(theme) {
   var opacity = {
     disabled: 0.38,
     enabled: 1,
-    cardShadow: 1
+    cardShadow: theme.shadows["default"].shadowOpacity
   };
   return {
     colors: colors,

package/lib/index.js

@@ -1693,6 +1693,21 @@ var getRadii = function getRadii(baseRadius) {
   };
 };
 
+var getShadows = function getShadows(systemPalette) {
+  return {
+    "default": {
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowColor: systemPalette.secondaryOutline,
+      shadowOpacity: 1,
+      shadowRadius: 4,
+      elevation: 10
+    }
+  };
+};
+
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var fonts = getFonts(scale.font);
   var fontSizes = getFontSizes(scale.fontSize);
@@ -1701,6 +1716,7 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var space = getSpace(scale.space);
   var sizes = getSizes(scale.size);
   var radii = getRadii(scale.radius);
+  var shadows = getShadows(systemPalette);
   return {
     colors: _objectSpread2({}, systemPalette),
     fonts: fonts,
@@ -1709,7 +1725,8 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
     borderWidths: borderWidths,
     space: space,
     sizes: sizes,
-    radii: radii
+    radii: radii,
+    shadows: shadows
   };
 };
 
@@ -2447,11 +2464,8 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    cardOffset: {
-      width: 0,
-      height: 2
-    },
-    cardElevation: 10
+    cardOffset: theme.shadows["default"].shadowOffset,
+    cardElevation: theme.shadows["default"].elevation
   };
   var widths = {
     leadingStatus: 8
@@ -2459,7 +2473,7 @@ var getListTheme = function getListTheme(theme) {
   var opacity = {
     disabled: 0.38,
     enabled: 1,
-    cardShadow: 1
+    cardShadow: theme.shadows["default"].shadowOpacity
   };
   return {
     colors: colors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.36.0",
+  "version": "8.36.2",
   "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.36.0",
+    "@hero-design/colors": "8.36.2",
     "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.36.0",
+    "@hero-design/react-native-month-year-picker": "^8.36.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.36.0",
-    "@hero-design/react-native-month-year-picker": "^8.36.0",
+    "@hero-design/eslint-plugin": "8.36.2",
+    "@hero-design/react-native-month-year-picker": "^8.36.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +65,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.36.0",
+    "eslint-config-hd": "8.36.2",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.36.0",
+    "prettier-config-hd": "8.36.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

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

@@ -1381,6 +1381,18 @@ Object {
     "xxlarge": 20,
     "xxxlarge": 24,
   },
+  "shadows": Object {
+    "default": Object {
+      "elevation": 10,
+      "shadowColor": "#e8e9ea",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 1,
+      "shadowRadius": 4,
+    },
+  },
   "sizes": Object {
     "14xlarge": 136,
     "15xlarge": 144,

package/src/theme/components/list.ts

@@ -28,8 +28,8 @@ const getListTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    cardOffset: { width: 0, height: 2 },
-    cardElevation: 10,
+    cardOffset: theme.shadows.default.shadowOffset,
+    cardElevation: theme.shadows.default.elevation,
   };
 
   const widths = {
@@ -39,7 +39,7 @@ const getListTheme = (theme: GlobalTheme) => {
   const opacity = {
     disabled: 0.38,
     enabled: 1,
-    cardShadow: 1,
+    cardShadow: theme.shadows.default.shadowOpacity,
   };
 
   return { colors, space, radii, widths, opacity, shadows };

package/src/theme/global/index.ts

@@ -12,6 +12,7 @@ import { getSizes } from './sizes';
 import { getBorderWidths, getRadii } from './borders';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
+import { getShadows } from './shadows';
 
 const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const fonts = getFonts(scale.font);
@@ -21,6 +22,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const space = getSpace(scale.space);
   const sizes = getSizes(scale.size);
   const radii = getRadii(scale.radius);
+  const shadows = getShadows(systemPalette);
 
   return {
     colors: {
@@ -33,6 +35,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
     space,
     sizes,
     radii,
+    shadows,
   };
 };
 

package/src/theme/global/shadows.ts

@@ -0,0 +1,19 @@
+import type { SystemPalette } from '.';
+
+const getShadows = (systemPalette: SystemPalette) => ({
+  default: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: systemPalette.secondaryOutline,
+    shadowOpacity: 1,
+    shadowRadius: 4,
+    elevation: 10,
+  },
+});
+
+type Shadows = ReturnType<typeof getShadows>;
+
+export { getShadows };
+export type { Shadows };

package/types/theme/global/index.d.ts

@@ -59,6 +59,18 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     space: import("./space").Space;
     sizes: import("./sizes").Sizes;
     radii: import("./borders").Radii;
+    shadows: {
+        default: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
+    };
 };
 type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export type { GlobalTheme, Scale, SystemPalette };

package/types/theme/global/shadows.d.ts

@@ -0,0 +1,16 @@
+import type { SystemPalette } from '.';
+declare const getShadows: (systemPalette: SystemPalette) => {
+    default: {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+type Shadows = ReturnType<typeof getShadows>;
+export { getShadows };
+export type { Shadows };