@hero-design/rn 7.0.5 → 7.1.1

package/babel.config.js

@@ -27,7 +27,7 @@ module.exports = function (api) {
   }
 
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['babel-preset-expo', '@babel/preset-typescript'],
     plugins,
   };
 };

package/es/index.js

@@ -1,5 +1,5 @@
-import React, { useContext, useMemo, createElement } from 'react';
-import require$$0$1, { View, Text as Text$1 } from 'react-native';
+import React, { useContext, useMemo, createElement, useRef, useEffect } from 'react';
+import require$$0$1, { Dimensions, View, Text as Text$1, Animated, StyleSheet as StyleSheet$1, TouchableHighlight } from 'react-native';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -8130,7 +8130,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$3 = ["inputs"],
+var _excluded$4 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8147,7 +8147,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$3);
+      defaults = _objectWithoutProperties$1(json, _excluded$4);
 
   if (ownInputs) {
     inputs = [];
@@ -9780,6 +9780,7 @@ var palette = {
   greenDark30: '#017d6d',
   greenDark75: '#002d27',
   greenLight30: '#4dcaba',
+  greenLight75: '#c0ece6',
   greenLight90: '#e6f7f5',
   grey: '#a3a6ac',
   greyDark15: '#8b8d92',
@@ -9819,6 +9820,7 @@ var palette = {
   redDark15: '#bd2d09',
   redDark30: '#9b2508',
   redDark75: '#380d03',
+  redLight15: '#e35330',
   redLight30: '#e87254',
   redLight60: '#f2ae9d',
   redLight75: '#f7cdc2',
@@ -9870,30 +9872,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 = 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 = {
@@ -9964,7 +9977,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,
@@ -10045,6 +10058,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), {}, {
@@ -10053,21 +10085,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(View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
+var StyledView = styled(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) {
@@ -10100,7 +10133,7 @@ var StyledText$1 = styled(Text$1)(_templateObject3$2 || (_templateObject3$2 = _t
   });
 });
 
-var _excluded$2 = ["content", "intent", "style", "testID"];
+var _excluded$3 = ["content", "intent", "style", "testID"];
 
 var Badge = function Badge(_ref) {
   var content = _ref.content,
@@ -10108,7 +10141,7 @@ var Badge = function Badge(_ref) {
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
 
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({
     themeIntent: intent,
@@ -10119,8 +10152,8 @@ var Badge = function Badge(_ref) {
   }, content));
 };
 
-var _templateObject$3;
-var StyledCard = styled(View)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$5;
+var StyledCard = styled(View)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.card.radii["default"];
 }, function (_ref2) {
@@ -10132,8 +10165,8 @@ var Card = function Card(props) {
   return /*#__PURE__*/React.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(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(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.borderWidths["default"];
 }, function (_ref2) {
@@ -10187,14 +10220,14 @@ var StyledDivider = styled(View)(_templateObject$2 || (_templateObject$2 = _tagg
   }
 });
 
-var _excluded$1 = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$2 = ["marginHorizontal", "marginVertical", "style", "testID"];
 
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
       marginVertical = _ref.marginVertical,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
 
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
@@ -19832,9 +19865,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) {
@@ -19863,8 +19896,8 @@ var Icon = function Icon(_ref) {
   });
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var StyledText = styled(Text$1)(_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(Text$1)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       theme = _ref.theme;
 
@@ -19908,7 +19941,7 @@ var StyledText = styled(Text$1)(_templateObject || (_templateObject = _taggedTem
   }
 });
 
-var _excluded = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$1 = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -19918,7 +19951,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.createElement(StyledText, _extends$1({
     themeFontSize: fontSize,
@@ -19931,4 +19964,80 @@ var Typography = {
   Text: Text
 };
 
-export { Badge, Card, Divider, Icon, ThemeProvider, Typography, getTheme, theme, useTheme };
+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 = Animated.createAnimatedComponent(StyledFABIcon);
+
+var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
+  var active = _ref.active,
+      iconProps = _objectWithoutProperties$1(_ref, _excluded);
+
+  var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
+  useEffect(function () {
+    var animation = 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.createElement(Animated.View, {
+    style: StyleSheet$1.flatten([{
+      transform: [{
+        rotate: interpolatedRotateAnimation
+      }]
+    }])
+  }, /*#__PURE__*/React.createElement(AnimatedIcons, iconProps));
+};
+
+var _templateObject;
+var StyledFABContainer = styled(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.createElement(StyledFABContainer, {
+    testID: testID,
+    onPress: function onPress() {
+      _onPress === null || _onPress === void 0 ? void 0 : _onPress();
+    },
+    activeOpacity: 0.6,
+    style: style
+  }, animated ? /*#__PURE__*/React.createElement(AnimatedFABIcon, {
+    active: active,
+    icon: icon,
+    testID: "animatedFABIcon"
+  }) : /*#__PURE__*/React.createElement(StyledFABIcon, {
+    icon: icon,
+    testID: "styledFABIcon"
+  }));
+};
+
+export { Badge, Card, Divider, FAB, Icon, ThemeProvider, Typography, getTheme, scale, theme, useTheme };