@draftbit/core 47.0.1-e04fa3.2 → 47.1.0

package/lib/commonjs/components/Button.js

@@ -21,10 +21,11 @@ function Base(_ref) {
     Icon,
     icon,
     title,
-    onPress,
     loading,
     disabled,
     style,
+    activeOpacity,
+    disabledOpacity,
     ...props
   } = _ref;
   const {
@@ -61,14 +62,13 @@ function Base(_ref) {
     buttonStyles.justifyContent = "flex-end";
   }
   return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
-    onPress: onPress,
     disabled: disabled || loading,
     style: _ref2 => {
       let {
         pressed
       } = _ref2;
       return [styles.base, {
-        opacity: pressed || disabled ? 0.75 : 1
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
       }, buttonStyles];
     }
   }, props), loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _theming = require("../../theming");
-var _Touchable = _interopRequireDefault(require("../Touchable"));
 var _hooks = require("../../hooks");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -60,7 +58,7 @@ const Checkbox = _ref => {
       onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
     }
   };
-  return /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
     onPress: handlePress,
     disabled: disabled,
     accessibilityState: {

package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js

@@ -9,7 +9,6 @@ var _reactNative = require("react-native");
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _context = require("./context");
-var _Touchable = _interopRequireDefault(require("../Touchable"));
 var _utilities = require("../../utilities");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -73,7 +72,7 @@ const CheckboxGroupRow = _ref => {
     textStyles,
     viewStyles
   } = (0, _utilities.extractStyles)(style);
-  return /*#__PURE__*/React.createElement(_Touchable.default, _extends({
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
     onPress: handlePress,
     style: [styles.mainParent, {
       flexDirection: direction

package/lib/commonjs/components/Checkbox/CheckboxRow.js

@@ -10,7 +10,6 @@ var _lodash = require("lodash");
 var _utilities = require("../../utilities");
 var _hooks = require("../../hooks");
 var _Text = _interopRequireDefault(require("../Text"));
-var _Touchable = _interopRequireDefault(require("../Touchable"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -83,7 +82,7 @@ const CheckboxRow = _ref => {
     textStyles,
     viewStyles
   } = (0, _utilities.extractStyles)(style);
-  return /*#__PURE__*/React.createElement(_Touchable.default, _extends({
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
     onPress: handlePress,
     style: [viewStyles, styles.mainParent, {
       flexDirection: direction

package/lib/commonjs/components/DeprecatedButton.js

@@ -8,7 +8,6 @@ var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _color = _interopRequireDefault(require("color"));
 var _Config = _interopRequireDefault(require("./Config"));
-var _Touchable = _interopRequireDefault(require("./Touchable"));
 var _Elevation = _interopRequireDefault(require("./Elevation"));
 var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +26,6 @@ const Button = _ref => {
     children,
     onPress,
     elevation = 0,
-    style,
     theme: {
       colors,
       disabledOpacity,
@@ -81,41 +79,19 @@ const Button = _ref => {
     marginRight: -8,
     width: _Config.default.buttonIconSize
   }];
-  const {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical,
-    ...innerStyles
-  } = _reactNative.StyleSheet.flatten(style || {});
-  const margins = {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical
-  };
   return /*#__PURE__*/React.createElement(_Elevation.default, {
     style: {
       elevation,
-      alignSelf: "stretch",
-      ...margins
+      alignSelf: "stretch"
     }
-  }, /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
     onPress: onPress,
     accessibilityState: {
       disabled
     },
     accessibilityRole: "button",
     disabled: disabled || loading,
-    style: [styles.button, buttonStyle, innerStyles]
+    style: [styles.button, buttonStyle]
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.content
   }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {

package/lib/commonjs/components/DeprecatedFAB.js

@@ -9,7 +9,6 @@ var _reactNative = require("react-native");
 var _color = _interopRequireDefault(require("color"));
 var _Config = _interopRequireDefault(require("./Config"));
 var _Text = _interopRequireDefault(require("./Text"));
-var _Touchable = _interopRequireDefault(require("./Touchable"));
 var _Elevation = _interopRequireDefault(require("./Elevation"));
 var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -107,7 +106,7 @@ const FAB = _ref => {
     style: [{
       elevation
     }, style]
-  }, /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
     onPress: onPress,
     accessibilityState: {
       disabled

package/lib/commonjs/components/Justification.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/lib/commonjs/components/Pressable.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pressable;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function Pressable(_ref) {
+  let {
+    children,
+    disabled,
+    onPress,
+    activeOpacity,
+    disabledOpacity,
+    delayLongPress,
+    hitSlop,
+    style,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
+    onPress: onPress,
+    disabled: disabled,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
+      }, style];
+    }
+  }, props), children);
+}

package/lib/commonjs/components/ResizeMode.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/lib/commonjs/components/Swiper/Swiper.js

@@ -25,6 +25,7 @@ const Swiper = _ref => {
     keyExtractor,
     renderItem,
     children,
+    onIndexChanged,
     style
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -34,6 +35,7 @@ const Swiper = _ref => {
     loop: loop,
     timeout: timeout,
     vertical: vertical,
+    onIndexChanged: onIndexChanged,
     controlsProps: {
       prevTitle,
       nextTitle,

package/lib/commonjs/components/Touchable.js

@@ -13,19 +13,24 @@ function Touchable(_ref) {
     children,
     disabled,
     onPress,
+    activeOpacity,
+    disabledOpacity,
+    delayLongPress,
+    hitSlop,
     style,
     ...props
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
-    onPress: onPress,
     disabled: disabled,
-    hitSlop: 8,
+    onPress: onPress,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
     style: _ref2 => {
       let {
         pressed
       } = _ref2;
       return [{
-        opacity: pressed || disabled ? 0.75 : 1
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
       }, style];
     }
   }, props), children);

package/lib/commonjs/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ActionSheetItem", {
     return _ActionSheet.ActionSheetItem;
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _CircleImage.default;
+  }
+});
 Object.defineProperty(exports, "AvatarEdit", {
   enumerable: true,
   get: function () {
@@ -99,6 +105,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "Center", {
+  enumerable: true,
+  get: function () {
+    return _Layout.Center;
+  }
+});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -117,12 +129,24 @@ Object.defineProperty(exports, "CheckboxRow", {
     return _Checkbox.CheckboxRow;
   }
 });
+Object.defineProperty(exports, "Circle", {
+  enumerable: true,
+  get: function () {
+    return _Layout.Circle;
+  }
+});
 Object.defineProperty(exports, "CircleImage", {
   enumerable: true,
   get: function () {
     return _CircleImage.default;
   }
 });
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function () {
+    return _Container.default;
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {
@@ -141,6 +165,12 @@ Object.defineProperty(exports, "Divider", {
     return _Divider.default;
   }
 });
+Object.defineProperty(exports, "FAB", {
+  enumerable: true,
+  get: function () {
+    return _FAB.default;
+  }
+});
 Object.defineProperty(exports, "FieldSearchBarFull", {
   enumerable: true,
   get: function () {
@@ -195,6 +225,12 @@ Object.defineProperty(exports, "Picker", {
     return _Picker.default;
   }
 });
+Object.defineProperty(exports, "Pressable", {
+  enumerable: true,
+  get: function () {
+    return _Pressable.default;
+  }
+});
 Object.defineProperty(exports, "ProgressBar", {
   enumerable: true,
   get: function () {
@@ -237,6 +273,12 @@ Object.defineProperty(exports, "RadioButtonRow", {
     return _index.RadioButtonRow;
   }
 });
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function () {
+    return _Layout.Row;
+  }
+});
 Object.defineProperty(exports, "RowBodyIcon", {
   enumerable: true,
   get: function () {
@@ -273,6 +315,24 @@ Object.defineProperty(exports, "Slider", {
     return _Slider.default;
   }
 });
+Object.defineProperty(exports, "Spacer", {
+  enumerable: true,
+  get: function () {
+    return _Layout.Spacer;
+  }
+});
+Object.defineProperty(exports, "Square", {
+  enumerable: true,
+  get: function () {
+    return _Layout.Square;
+  }
+});
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function () {
+    return _Layout.Stack;
+  }
+});
 Object.defineProperty(exports, "StarRating", {
   enumerable: true,
   get: function () {
@@ -361,47 +421,51 @@ var _Icon = require("./interfaces/Icon");
 var _theming = require("./theming");
 var _Provider = _interopRequireDefault(require("./Provider"));
 var _DefaultTheme = _interopRequireDefault(require("./styles/DefaultTheme"));
-var _ScreenContainer = _interopRequireDefault(require("./components/ScreenContainer"));
+var _Text = require("./components/Text");
 var _Banner = _interopRequireDefault(require("./components/Banner"));
 var _Button = require("./components/Button");
-var _Text = require("./components/Text");
+var _CircleImage = _interopRequireDefault(require("./components/CircleImage"));
+var _AvatarEdit = _interopRequireDefault(require("./components/AvatarEdit"));
+var _Card = _interopRequireDefault(require("./components/Card"));
+var _Carousel = _interopRequireDefault(require("./components/Carousel"));
+var _Checkbox = require("./components/Checkbox");
+var _Container = _interopRequireDefault(require("./components/Container"));
+var _Divider = _interopRequireDefault(require("./components/Divider"));
+var _FAB = _interopRequireDefault(require("./components/FAB"));
+var _FieldSearchBarFull = _interopRequireDefault(require("./components/FieldSearchBarFull"));
 var _IconButton = _interopRequireDefault(require("./components/IconButton"));
-var _Touchable = _interopRequireDefault(require("./components/Touchable"));
-var _ToggleButton = _interopRequireDefault(require("./components/ToggleButton"));
-var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
+var _Image = _interopRequireDefault(require("./components/Image"));
+var _SVG = _interopRequireDefault(require("./components/SVG"));
 var _NumberInput = _interopRequireDefault(require("./components/NumberInput"));
-var _TextField = _interopRequireDefault(require("./components/TextField"));
-var _FieldSearchBarFull = _interopRequireDefault(require("./components/FieldSearchBarFull"));
-var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
-var _Checkbox = require("./components/Checkbox");
-var _index = require("./components/RadioButton/index");
-var _Slider = _interopRequireDefault(require("./components/Slider"));
-var _Stepper = _interopRequireDefault(require("./components/Stepper"));
+var _ScreenContainer = _interopRequireDefault(require("./components/ScreenContainer"));
 var _StarRating = _interopRequireDefault(require("./components/StarRating"));
+var _Surface = _interopRequireDefault(require("./components/Surface"));
 var _Switch = _interopRequireWildcard(require("./components/Switch"));
-var _SVG = _interopRequireDefault(require("./components/SVG"));
-var _Image = _interopRequireDefault(require("./components/Image"));
-var _AvatarEdit = _interopRequireDefault(require("./components/AvatarEdit"));
-var _CircleImage = _interopRequireDefault(require("./components/CircleImage"));
-var _Swiper = require("./components/Swiper");
+var _TextField = _interopRequireDefault(require("./components/TextField"));
+var _ToggleButton = _interopRequireDefault(require("./components/ToggleButton"));
+var _Touchable = _interopRequireDefault(require("./components/Touchable"));
+var _Pressable = _interopRequireDefault(require("./components/Pressable"));
 var _Accordion = require("./components/Accordion");
-var _Surface = _interopRequireDefault(require("./components/Surface"));
 var _ActionSheet = require("./components/ActionSheet");
-var _Carousel = _interopRequireDefault(require("./components/Carousel"));
-var _Divider = _interopRequireDefault(require("./components/Divider"));
+var _Swiper = require("./components/Swiper");
+var _Layout = require("./components/Layout");
+var _index = require("./components/RadioButton/index");
+var _CardBlock = _interopRequireDefault(require("./components/CardBlock"));
+var _CardContainer = _interopRequireDefault(require("./components/CardContainer"));
+var _CardContainerRating = _interopRequireDefault(require("./components/CardContainerRating"));
+var _CardInline = _interopRequireDefault(require("./components/CardInline"));
+var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _HeaderLarge = _interopRequireDefault(require("./components/HeaderLarge"));
 var _HeaderMedium = _interopRequireDefault(require("./components/HeaderMedium"));
 var _HeaderOverline = _interopRequireDefault(require("./components/HeaderOverline"));
+var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
 var _ProgressCircle = _interopRequireDefault(require("./components/ProgressCircle"));
 var _RowBodyIcon = _interopRequireDefault(require("./components/RowBodyIcon"));
 var _RowHeadlineImageCaption = _interopRequireDefault(require("./components/RowHeadlineImageCaption"));
 var _RowHeadlineImageIcon = _interopRequireDefault(require("./components/RowHeadlineImageIcon"));
-var _Card = _interopRequireDefault(require("./components/Card"));
-var _CardBlock = _interopRequireDefault(require("./components/CardBlock"));
-var _CardContainer = _interopRequireDefault(require("./components/CardContainer"));
-var _CardContainerRating = _interopRequireDefault(require("./components/CardContainerRating"));
-var _CardInline = _interopRequireDefault(require("./components/CardInline"));
+var _Slider = _interopRequireDefault(require("./components/Slider"));
+var _Stepper = _interopRequireDefault(require("./components/Stepper"));
 var _useAuthState = require("./components/useAuthState");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/commonjs/mappings/Button.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SEED_DATA = void 0;
 var _types = require("@draftbit/types");
-const SEED_DATA_TRIGGERS = [_types.Triggers.OnPress];
+const SEED_DATA_TRIGGERS = [_types.Triggers.OnPress, _types.Triggers.OnLongPress];
 const SEED_DATA_PROPS = {
   onPress: (0, _types.createActionProp)(),
+  onLongPress: (0, _types.createActionProp)(),
   icon: (0, _types.createIconProp)({
     defaultValue: null,
     required: false
@@ -18,12 +19,37 @@ const SEED_DATA_PROPS = {
     defaultValue: "Get Started"
   }),
   disabled: (0, _types.createDisabledProp)(),
-  loading: (0, _types.createLoadingProp)()
-};
-const LAYOUT = {
-  backgroundColor: "transparent",
-  borderRadius: 8,
-  fontFamily: "system-700"
+  loading: (0, _types.createLoadingProp)(),
+  activeOpacity: (0, _types.createStaticNumberProp)({
+    label: "Active Opacity",
+    description: "Opacity of the button when active.",
+    defaultValue: 0.8,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    precision: 2,
+    required: false
+  }),
+  disabledOpacity: (0, _types.createStaticNumberProp)({
+    label: "Disabled Opacity",
+    description: "Opacity of the button when disabled.",
+    defaultValue: 0.8,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    precision: 2,
+    required: false
+  }),
+  delayLongPress: (0, _types.createStaticNumberProp)({
+    label: "Delay Long Press",
+    description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+    required: false
+  }),
+  hitSlop: (0, _types.createStaticNumberProp)({
+    label: "Hit Slop",
+    description: "Sets additional distance outside of element in which a press can be detected",
+    required: false
+  })
 };
 const SEED_DATA = [{
   name: "Button Outline",
@@ -31,7 +57,8 @@ const SEED_DATA = [{
   category: _types.COMPONENT_TYPES.deprecated,
   stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "transparent",
     borderWidth: 1,
     textAlign: "center"
@@ -44,7 +71,8 @@ const SEED_DATA = [{
   category: _types.COMPONENT_TYPES.deprecated,
   stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "primary",
     textAlign: "center"
   },
@@ -56,7 +84,8 @@ const SEED_DATA = [{
   category: _types.COMPONENT_TYPES.button,
   stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "primary",
     textAlign: "center"
   },

package/lib/commonjs/mappings/FlashList.js

@@ -5,7 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SEED_DATA = void 0;
 var _types = require("@draftbit/types");
-const SEED_DATA = {
+const SEED_DATA = [{
+  name: "Masonry List",
+  tag: "MasonryFlashList",
+  description: "Masonry Flashlist by Shopify",
+  packageName: "@shopify/flash-list",
+  category: _types.COMPONENT_TYPES.data,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1
+  },
+  triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
+  props: {
+    onRefresh: (0, _types.createActionProp)(),
+    onEndReached: (0, _types.createActionProp)(),
+    numColumns: (0, _types.createNumColumnsType)({
+      editable: true
+    }),
+    estimatedItemSize: (0, _types.createNumberProp)({
+      group: _types.GROUPS.basic,
+      label: "Est. Item Size",
+      description: "Approximate size of the items before rendering.",
+      defaultValue: 50,
+      step: 1,
+      precision: 0
+    }),
+    optimizeItemArrangement: (0, _types.createStaticBoolProp)({
+      label: "Optimize Item Arrangement",
+      description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false."
+    }),
+    onEndReachedThreshold: (0, _types.createStaticNumberProp)({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
+    })
+  }
+}, {
   name: "FlashList",
   tag: "FlashList",
   description: "Flashlist by Shopify",
@@ -15,7 +50,10 @@ const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
   props: {
+    onRefresh: (0, _types.createActionProp)(),
+    onEndReached: (0, _types.createActionProp)(),
     estimatedItemSize: (0, _types.createNumberProp)({
       group: _types.GROUPS.basic,
       label: "Est. Item Size",
@@ -34,7 +72,12 @@ const SEED_DATA = {
     }),
     numColumns: (0, _types.createNumColumnsType)({
       editable: true
+    }),
+    onEndReachedThreshold: (0, _types.createStaticNumberProp)({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
     })
   }
-};
+}];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/FlatList.js

@@ -14,7 +14,10 @@ const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
   props: {
+    onRefresh: (0, _types.createActionProp)(),
+    onEndReached: (0, _types.createActionProp)(),
     horizontal: (0, _types.createStaticBoolProp)({
       label: "Horizontal",
       description: "Render list horizontally"
@@ -25,6 +28,15 @@ const SEED_DATA = {
     }),
     numColumns: (0, _types.createNumColumnsType)({
       editable: true
+    }),
+    initialNumToRender: (0, _types.createStaticBoolProp)({
+      label: "Initial Num To Render",
+      descriprion: "How many items to render in the initial batch"
+    }),
+    onEndReachedThreshold: (0, _types.createStaticNumberProp)({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
     })
   }
 };

package/lib/commonjs/mappings/Swiper.js

@@ -14,7 +14,9 @@ const SEED_DATA = {
     height: 300,
     width: "100%"
   },
+  triggers: [_types.Triggers.OnIndexChanged],
   props: {
+    onIndexChanged: (0, _types.createActionProp)(),
     from: (0, _types.createNumberProp)({
       group: _types.GROUPS.basic,
       label: "Initial Slide"