@hero-design/rn 7.0.4 → 7.1.0

package/lib/index.js

@@ -8139,7 +8139,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$1 = ["inputs"],
+var _excluded$4 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8156,7 +8156,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$1);
+      defaults = _objectWithoutProperties$1(json, _excluded$4);
 
   if (ownInputs) {
     inputs = [];
@@ -9789,6 +9789,7 @@ var palette = {
   greenDark30: '#017d6d',
   greenDark75: '#002d27',
   greenLight30: '#4dcaba',
+  greenLight75: '#c0ece6',
   greenLight90: '#e6f7f5',
   grey: '#a3a6ac',
   greyDark15: '#8b8d92',
@@ -9828,6 +9829,7 @@ var palette = {
   redDark15: '#bd2d09',
   redDark30: '#9b2508',
   redDark75: '#380d03',
+  redLight15: '#e35330',
   redLight30: '#e87254',
   redLight60: '#f2ae9d',
   redLight75: '#f7cdc2',
@@ -9879,30 +9881,41 @@ var systemPalette = {
   outline: palette.greyLight60
 };
 
+var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
+
+var scale = function scale(size) {
+  var _Dimensions$get = require$$0$1.Dimensions.get('window'),
+      width = _Dimensions$get.width,
+      height = _Dimensions$get.height;
+
+  var shortDimension = width < height ? width : height;
+  return shortDimension / BASE_WIDTH * size;
+};
+
 var BASE$1 = 8;
 var space = {
-  xxsmall: BASE$1 * 0.25,
-  xsmall: BASE$1 * 0.5,
-  small: BASE$1,
-  medium: BASE$1 * 2,
-  large: BASE$1 * 3,
-  xlarge: BASE$1 * 4,
-  xxlarge: BASE$1 * 5,
-  xxxlarge: BASE$1 * 6,
-  xxxxlarge: BASE$1 * 7
+  xxsmall: scale(BASE$1 * 0.25),
+  xsmall: scale(BASE$1 * 0.5),
+  small: scale(BASE$1),
+  medium: scale(BASE$1 * 2),
+  large: scale(BASE$1 * 3),
+  xlarge: scale(BASE$1 * 4),
+  xxlarge: scale(BASE$1 * 5),
+  xxxlarge: scale(BASE$1 * 6),
+  xxxxlarge: scale(BASE$1 * 7)
 };
 
 var BASE = 16;
 var fontSizes = {
-  xxxxxlarge: BASE * 2,
-  xxxxlarge: BASE * 1.75,
-  xxxlarge: BASE * 1.5,
-  xxlarge: BASE * 1.25,
-  xlarge: BASE * 1.125,
-  large: BASE,
-  medium: BASE * 0.875,
-  small: BASE * 0.75,
-  xsmall: BASE * 0.625 // 10
+  xxxxxlarge: scale(BASE * 2),
+  xxxxlarge: scale(BASE * 1.75),
+  xxxlarge: scale(BASE * 1.5),
+  xxlarge: scale(BASE * 1.25),
+  xlarge: scale(BASE * 1.125),
+  large: scale(BASE),
+  medium: scale(BASE * 0.875),
+  small: scale(BASE * 0.75),
+  xsmall: scale(BASE * 0.625) //      10
 
 };
 var fontWeights = {
@@ -9973,7 +9986,7 @@ var getCardTheme = function getCardTheme(theme) {
     "default": "12px"
   };
   var padding = {
-    "default": "".concat(theme.space.medium, "px")
+    "default": "".concat(theme.space.small, "px")
   };
   return {
     radii: radii,
@@ -9992,13 +10005,13 @@ var getDividerTheme = function getDividerTheme(theme) {
     large: "".concat(theme.space.large, "px"),
     xlarge: "".concat(theme.space.xlarge, "px")
   };
-  var borderWiths = {
+  var borderWidths = {
     "default": "".concat(theme.borderWidths.base, "px")
   };
   return {
     colors: colors,
     space: space,
-    borderWiths: borderWiths
+    borderWidths: borderWidths
   };
 };
 
@@ -10054,6 +10067,25 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
 };
 
+var getFABTheme = function getFABTheme(theme) {
+  var colors = {
+    buttonBackground: theme.colors.backgroundDark,
+    icon: theme.colors.invertedText
+  };
+  var sizes = {
+    width: '64px',
+    height: '64px'
+  };
+  var fontSizes = {
+    "default": "".concat(theme.fontSizes.xxxxlarge, "px")
+  };
+  return {
+    fontSizes: fontSizes,
+    colors: colors,
+    sizes: sizes
+  };
+};
+
 var getTheme = function getTheme() {
   var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
   return _objectSpread2(_objectSpread2({}, theme), {}, {
@@ -10062,21 +10094,22 @@ var getTheme = function getTheme() {
       card: getCardTheme(theme),
       divider: getDividerTheme(theme),
       icon: getIconTheme(theme),
-      typography: getTypographyTheme(theme)
+      typography: getTypographyTheme(theme),
+      fab: getFABTheme(theme)
     }
   });
 };
 
 var theme = getTheme();
 
-var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4$2;
+var _templateObject$6, _templateObject2$3, _templateObject3$2, _templateObject4$2;
 var BACKGROUND_INTENTS = {
   success: 'successBackground',
   warning: 'warningBackground',
   danger: 'dangerBackground',
   info: 'infoBackground'
 };
-var StyledView = styled(require$$0$1.View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
+var StyledView = styled(require$$0$1.View)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.badge.borderWidths["default"];
 }, function (_ref2) {
@@ -10109,23 +10142,27 @@ var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$2 || (_templateObj
   });
 });
 
+var _excluded$3 = ["content", "intent", "style", "testID"];
+
 var Badge = function Badge(_ref) {
   var content = _ref.content,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(StyledView, {
-    testID: testID,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({
     themeIntent: intent,
-    style: style
-  }, /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
+    style: style,
+    testID: testID
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
     themeIntent: intent
   }, content));
 };
 
-var _templateObject$3;
-var StyledCard = styled(require$$0$1.View)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$5;
+var StyledCard = styled(require$$0$1.View)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.card.radii["default"];
 }, function (_ref2) {
@@ -10137,10 +10174,10 @@ var Card = function Card(props) {
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, props);
 };
 
-var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
-var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$4, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
+var StyledDivider = styled(require$$0$1.View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.__hd__.divider.borderWiths["default"];
+  return theme.__hd__.divider.borderWidths["default"];
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.__hd__.divider.colors["default"];
@@ -10192,13 +10229,21 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObj
   }
 });
 
+var _excluded$2 = ["marginHorizontal", "marginVertical", "style", "testID"];
+
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
-      marginVertical = _ref.marginVertical;
-  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, {
+      marginVertical = _ref.marginVertical,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical
-  });
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }, nativeProps));
 };
 
 var dist = {};
@@ -19829,9 +19874,9 @@ var heroIconConfig = {
 	preferences: preferences
 };
 
-var _templateObject$1, _templateObject2$1;
+var _templateObject$3, _templateObject2$1;
 var HeroIcon = dist.createIconSetFromIcoMoon(heroIconConfig, 'hero-icons', 'hero-icons.ttf');
-var StyledHeroIcon = styled(HeroIcon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+var StyledHeroIcon = styled(HeroIcon)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
   var themeIntent = _ref.themeIntent,
       themeSize = _ref.themeSize;
   return css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", "px;\n  "])), function (_ref2) {
@@ -19860,8 +19905,8 @@ var Icon = function Icon(_ref) {
   });
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var StyledText = styled(require$$0$1.Text)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var StyledText = styled(require$$0$1.Text)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       theme = _ref.theme;
 
@@ -19905,7 +19950,7 @@ var StyledText = styled(require$$0$1.Text)(_templateObject || (_templateObject =
   }
 });
 
-var _excluded = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$1 = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -19915,7 +19960,7 @@ var Text = function Text(_ref) {
       fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'body' : _ref$intent,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledText, _extends$1({
     themeFontSize: fontSize,
@@ -19928,12 +19973,90 @@ var Typography = {
   Text: Text
 };
 
+var _templateObject$1;
+var StyledFABIcon = styled(Icon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.fab.colors.icon;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.fab.fontSizes["default"];
+});
+
+var _excluded = ["active"];
+var AnimatedIcons = require$$0$1.Animated.createAnimatedComponent(StyledFABIcon);
+
+var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
+  var active = _ref.active,
+      iconProps = _objectWithoutProperties$1(_ref, _excluded);
+
+  var rotateAnimation = React.useRef(new require$$0$1.Animated.Value(active ? 1 : 0));
+  React.useEffect(function () {
+    var animation = require$$0$1.Animated.timing(rotateAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true
+    });
+    animation.start();
+    return function () {
+      animation.stop();
+    };
+  }, [active]);
+  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-45deg']
+  });
+  return /*#__PURE__*/React__default["default"].createElement(require$$0$1.Animated.View, {
+    style: require$$0$1.StyleSheet.flatten([{
+      transform: [{
+        rotate: interpolatedRotateAnimation
+      }]
+    }])
+  }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, iconProps));
+};
+
+var _templateObject;
+var StyledFABContainer = styled(require$$0$1.TouchableHighlight)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.fab.sizes.height;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.fab.sizes.width;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.__hd__.fab.colors.buttonBackground;
+});
+
+var FAB = function FAB(_ref) {
+  var _onPress = _ref.onPress,
+      icon = _ref.icon,
+      animated = _ref.animated,
+      testID = _ref.testID,
+      active = _ref.active,
+      style = _ref.style;
+  return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
+    testID: testID,
+    onPress: function onPress() {
+      _onPress === null || _onPress === void 0 ? void 0 : _onPress();
+    },
+    activeOpacity: 0.6,
+    style: style
+  }, animated ? /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
+    active: active,
+    icon: icon,
+    testID: "animatedFABIcon"
+  }) : /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
+    icon: icon,
+    testID: "styledFABIcon"
+  }));
+};
+
 exports.Badge = Badge;
 exports.Card = Card;
 exports.Divider = Divider;
+exports.FAB = FAB;
 exports.Icon = Icon;
 exports.ThemeProvider = ThemeProvider;
 exports.Typography = Typography;
 exports.getTheme = getTheme;
+exports.scale = scale;
 exports.theme = theme;
 exports.useTheme = useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.0.4",
+  "version": "7.1.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -9,7 +9,8 @@
     "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
     "dev": "expo start",
-    "test": "jest --runInBand --watch",
+    "test": "jest --runInBand",
+    "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --runInBand --logHeapUsage",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
@@ -17,7 +18,7 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.0.4",
+    "@hero-design/colors": "7.1.0",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
@@ -29,7 +30,7 @@
     "@babel/core": "^7.17.5",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
+    "@babel/preset-typescript": "^7.17.12",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@rollup/plugin-babel": "^5.3.1",
@@ -67,6 +68,7 @@
     "react-native-vector-icons": "^9.1.0",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
+    "rollup-plugin-copy": "^3.4.0",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.5"
   },