@draftbit/core 47.0.0 → 47.0.1-50db3c.2

package/lib/commonjs/components/Accordion/AccordionItem.js

@@ -12,7 +12,6 @@ var _theming = require("../../theming");
 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); }
 const AccordionItem = _ref => {
   let {
     Icon,
@@ -27,9 +26,10 @@ const AccordionItem = _ref => {
     textStyles,
     viewStyles
   } = (0, _utilities.extractStyles)(style);
-  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
-    style: [styles.container, viewStyles]
-  }, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: [styles.container, viewStyles],
+    ...rest
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.row
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
@@ -61,4 +61,23 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 var _default = (0, _theming.withTheme)(AccordionItem);
+exports.default = _default;.StyleSheet.create({
+  container: {
+    padding: 8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: 8
+  },
+  item: {
+    marginVertical: 6,
+    paddingLeft: 8
+  },
+  content: {
+    flex: 1,
+    justifyContent: "center"
+  }
+});
+var _default = (0, _theming.withTheme)(AccordionItem);
 exports.default = _default;

package/lib/commonjs/components/Button.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ButtonSolid = exports.ButtonOutline = exports.Button = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _theming = require("../theming");
 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); }
@@ -22,6 +22,9 @@ function Base(_ref) {
     icon,
     title,
     onPress,
+    onLongPress,
+    activeOpacity,
+    disabledOpacity,
     loading,
     disabled,
     style,
@@ -60,27 +63,36 @@ function Base(_ref) {
   if (textAlign === "right") {
     buttonStyles.justifyContent = "flex-end";
   }
-  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
+  const getOpacity = (0, _react.useCallback)(pressed => {
+    if (disabled) {
+      return disabledOpacity;
+    } else {
+      if (pressed) return activeOpacity;else return 1;
+    }
+  }, [activeOpacity, disabled, disabledOpacity]);
+  const _style = (0, _react.useCallback)(_ref2 => {
+    let {
+      pressed
+    } = _ref2;
+    return [buttonStyles, {
+      opacity: getOpacity(pressed)
+    }];
+  }, [getOpacity, buttonStyles]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
     onPress: onPress,
+    onLongPress: onLongPress,
     disabled: disabled || loading,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [styles.base, {
-        opacity: pressed || disabled ? 0.75 : 1
-      }, buttonStyles];
-    }
-  }, props), loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
+    style: (styles.base, _style)
+  }, props), loading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
     size: "small",
     color: color,
     style: styles.loading
-  }) : null, icon && !loading ? /*#__PURE__*/React.createElement(Icon, {
+  }) : null, icon && !loading ? /*#__PURE__*/_react.default.createElement(Icon, {
     name: icon,
     color: color,
     style: styles.icon,
     size: CONSTANTS.icon
-  }) : null, /*#__PURE__*/React.createElement(_reactNative.Text, {
+  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: titleStyles
   }, title));
 }
@@ -90,7 +102,7 @@ const Solid = _ref3 => {
     theme,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/_react.default.createElement(Base, _extends({
     style: [{
       color: "#FFF",
       borderRadius: theme.roundness,
@@ -108,7 +120,7 @@ const Outline = _ref4 => {
     theme,
     ...props
   } = _ref4;
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/_react.default.createElement(Base, _extends({
     style: [styles.outline, {
       borderRadius: theme.roundness,
       borderColor: theme.colors.primary,
@@ -124,8 +136,10 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    minHeight: CONSTANTS.baseHeight,
-    paddingHorizontal: 12,
+    paddingTop: CONSTANTS.padding,
+    paddingLeft: CONSTANTS.padding,
+    paddingRight: CONSTANTS.padding,
+    paddingBottom: CONSTANTS.padding,
     fontFamily: "System",
     fontWeight: "700",
     ..._reactNative.Platform.select({
@@ -139,11 +153,6 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: "transparent",
     borderWidth: 1
   },
-  bare: {
-    backgroundColor: "transparent",
-    padding: 0,
-    minHeight: undefined
-  },
   loading: {
     marginRight: 6
   },

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/DeprecatedCardWrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _theming = require("../theming");
-var _Touchable = _interopRequireDefault(require("./Touchable"));
+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); }
 const getWidth = numColumns => {
@@ -28,7 +28,7 @@ const Card = _ref => {
     ...rest
   } = _ref;
   const width = getWidth(numColumns);
-  return /*#__PURE__*/_react.default.createElement(_Touchable.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
     disabled: !onPress,
     onPress: onPress,
     style: [style, {

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 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/commonjs/components/Picker/Picker.js

@@ -11,8 +11,7 @@ var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _picker = require("@react-native-picker/picker");
 var _theming = require("../../theming");
 var _Portal = _interopRequireDefault(require("../Portal/Portal"));
-var _DeprecatedButton = _interopRequireDefault(require("../DeprecatedButton"));
-var _Touchable = _interopRequireDefault(require("../Touchable"));
+var _Button = require("../Button");
 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); }
@@ -207,7 +206,7 @@ const Picker = _ref => {
     /* marginsContainer */
     React.createElement(_reactNative.View, {
       style: [styles.marginsContainer, marginStyles]
-    }, /*#__PURE__*/React.createElement(_Touchable.default, {
+    }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
       disabled: disabled,
       onPress: togglePickerVisible,
       style: styles.touchableContainer
@@ -226,7 +225,7 @@ const Picker = _ref => {
       }]
     }, /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
       style: styles.iosSafeArea
-    }, /*#__PURE__*/React.createElement(_DeprecatedButton.default, {
+    }, /*#__PURE__*/React.createElement(_Button.Button, {
       Icon: Icon,
       type: "text",
       onPress: togglePickerVisible,

package/lib/commonjs/components/Picker/PickerComponent.android.js

@@ -15,9 +15,7 @@ var _Touchable = _interopRequireDefault(require("../Touchable"));
 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); }
 const Picker = _ref => {
-  var _options$find$label, _options$find;
   let {
     style,
     options,
@@ -27,6 +25,7 @@ const Picker = _ref => {
     onValueChange: onValueChangeOverride = () => {},
     ...props
   } = _ref;
+  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -71,7 +70,7 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && (0, _lodash.default)(_reactNative.StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
   return /*#__PURE__*/React.createElement(_Touchable.default, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -95,6 +94,24 @@ const Picker = _ref => {
     key: o.value
   }))), /*#__PURE__*/React.createElement(_reactNative.View, {
     pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(_TextField.default, {
+    ...props,
+    value: selectedLabel,
+    placeholder: placeholder,
+    // @ts-ignore
+    ref: textField,
+    disabled: disabled,
+    // @ts-expect-error
+    style: stylesWithoutMargin
+  }))));
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  }
+});
+var _default = (0, _theming.withTheme)(Picker);
+exports.default = _default;pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(_TextField.default, _extends({}, props, {
     value: selectedLabel,
     placeholder: placeholder

package/lib/commonjs/components/Picker/PickerComponent.ios.js

@@ -11,7 +11,7 @@ var _lodash = _interopRequireDefault(require("lodash.omit"));
 var _picker = require("@react-native-picker/picker");
 var _theming = require("../../theming");
 var _Portal = _interopRequireDefault(require("../Portal/Portal"));
-var _DeprecatedButton = _interopRequireDefault(require("../DeprecatedButton"));
+var _Button = require("../Button");
 var _TextField = _interopRequireDefault(require("../TextField"));
 var _Touchable = _interopRequireDefault(require("../Touchable"));
 var _utilities = require("../../utilities");
@@ -99,7 +99,7 @@ const Picker = _ref => {
     }]
   }, /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
     style: styles.pickerContainer
-  }, /*#__PURE__*/React.createElement(_DeprecatedButton.default, {
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
     Icon: Icon,
     type: "text",
     onPress: toggleVisibility,

package/lib/commonjs/components/Pressable.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pressable;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+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 Pressable(_ref) {
+  let {
+    children,
+    disabled,
+    onPress,
+    onLongPress,
+    hitSlop,
+    delayLongPress,
+    activeOpacity,
+    disabledOpacity,
+    style,
+    ...props
+  } = _ref;
+  const getOpacity = (0, _react.useCallback)(pressed => {
+    if (disabled) {
+      return disabledOpacity;
+    } else {
+      if (pressed) return activeOpacity;else return 1;
+    }
+  }, [activeOpacity, disabled, disabledOpacity]);
+  const _style = (0, _react.useCallback)(_ref2 => {
+    let {
+      pressed
+    } = _ref2;
+    return [style, {
+      opacity: getOpacity(pressed)
+    }];
+  }, [getOpacity, style]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: onPress,
+    onLongPress: onLongPress,
+    disabled: disabled,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _style,
+    ...props
+  }, children);
+}ressed)
+    }];
+  }, [getOpacity, style]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
+    onPress: onPress,
+    onLongPress: onLongPress,
+    disabled: disabled,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _style
+  }, props), children);
+}

package/lib/commonjs/components/ResizeMode.js

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

package/lib/commonjs/components/Touchable.js

@@ -4,29 +4,45 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Touchable;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-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); }
 function Touchable(_ref) {
   let {
     children,
     disabled,
     onPress,
+    onLongPress,
+    hitSlop,
+    delayLongPress,
+    activeOpacity,
+    disabledOpacity,
     style,
     ...props
   } = _ref;
+  const getOpacity = (0, _react.useCallback)(pressed => {
+    if (disabled) {
+      return disabledOpacity;
+    } else {
+      if (pressed) return activeOpacity;else return 1;
+    }
+  }, [activeOpacity, disabled, disabledOpacity]);
+  const _style = (0, _react.useCallback)(_ref2 => {
+    let {
+      pressed
+    } = _ref2;
+    return [style, {
+      opacity: getOpacity(pressed)
+    }];
+  }, [getOpacity, style]);
   return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
     onPress: onPress,
+    onLongPress: onLongPress,
     disabled: disabled,
-    hitSlop: 8,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [{
-        opacity: pressed || disabled ? 0.75 : 1
-      }, style];
-    }
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _style
   }, props), children);
 }

package/lib/commonjs/constants.js

@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
 });
-exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
+exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;

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,19 @@ 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)({
+    required: false
+  }),
+  disabledOpacity: (0, _types.createStaticNumberProp)({
+    required: false
+  }),
+  delayLongPress: (0, _types.createStaticNumberProp)({
+    required: false
+  }),
+  hitSlop: (0, _types.createStaticNumberProp)({
+    required: false
+  })
 };
 const SEED_DATA = [{
   name: "Button Outline",
@@ -31,8 +39,9 @@ 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,
     backgroundColor: "transparent",
+    borderRadius: 8,
+    fontFamily: "system-700",
     borderWidth: 1,
     textAlign: "center"
   },
@@ -44,7 +53,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 +66,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/Pressable.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA_PROPS = {
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Borders],
+  layout: {},
+  triggers: [_types.Triggers.OnPress, _types.Triggers.OnLongPress],
+  props: {
+    onPress: (0, _types.createActionProp)(),
+    onLongPress: (0, _types.createActionProp)(),
+    activeOpacity: (0, _types.createNumberProp)({
+      label: "Active Opacity",
+      description: "The opacity when the button is pressed.",
+      defaultValue: 0.8,
+      group: _types.GROUPS.basic
+    }),
+    disabledOpacity: (0, _types.createNumberProp)({
+      label: "Disabled Opacity",
+      description: "The opacity when the button is disabled.",
+      defaultValue: 0.8,
+      group: _types.GROUPS.basic
+    }),
+    delayLongPress: (0, _types.createNumberProp)({
+      label: "Delay Long Press",
+      description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+      group: _types.GROUPS.basic
+    }),
+    hitSlop: (0, _types.createNumberProp)({
+      label: "Hit Slop",
+      description: "Sets additional distance outside of element in which a press can be detected.",
+      group: _types.GROUPS.basic
+    })
+  }
+};
+const SEED_DATA = [{
+  name: "Touchable",
+  tag: "Touchable",
+  description: "An interactive view with no styles",
+  category: _types.COMPONENT_TYPES.button,
+  ...SEED_DATA_PROPS
+}, {
+  name: "Pressable",
+  tag: "Pressable",
+  description: "An interactive view with no styles",
+  category: _types.COMPONENT_TYPES.deprecated,
+  ...SEED_DATA_PROPS
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/Button.js

@@ -1,5 +1,5 @@
 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); }
-import * as React from "react";
+import React, { useCallback } from "react";
 import { Text, Pressable, Platform, StyleSheet, ActivityIndicator } from "react-native";
 import { withTheme } from "../theming";
 const CONSTANTS = {
@@ -14,6 +14,9 @@ function Base(_ref) {
     icon,
     title,
     onPress,
+    onLongPress,
+    activeOpacity,
+    disabledOpacity,
     loading,
     disabled,
     style,
@@ -52,17 +55,26 @@ function Base(_ref) {
   if (textAlign === "right") {
     buttonStyles.justifyContent = "flex-end";
   }
+  const getOpacity = useCallback(pressed => {
+    if (disabled) {
+      return disabledOpacity;
+    } else {
+      if (pressed) return activeOpacity;else return 1;
+    }
+  }, [activeOpacity, disabled, disabledOpacity]);
+  const _style = useCallback(_ref2 => {
+    let {
+      pressed
+    } = _ref2;
+    return [buttonStyles, {
+      opacity: getOpacity(pressed)
+    }];
+  }, [getOpacity, buttonStyles]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: onPress,
+    onLongPress: onLongPress,
     disabled: disabled || loading,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [styles.base, {
-        opacity: pressed || disabled ? 0.75 : 1
-      }, buttonStyles];
-    }
+    style: (styles.base, _style)
   }, props), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
     color: color,
@@ -116,8 +128,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    minHeight: CONSTANTS.baseHeight,
-    paddingHorizontal: 12,
+    paddingTop: CONSTANTS.padding,
+    paddingLeft: CONSTANTS.padding,
+    paddingRight: CONSTANTS.padding,
+    paddingBottom: CONSTANTS.padding,
     fontFamily: "System",
     fontWeight: "700",
     ...Platform.select({
@@ -131,11 +145,6 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent",
     borderWidth: 1
   },
-  bare: {
-    backgroundColor: "transparent",
-    padding: 0,
-    minHeight: undefined
-  },
   loading: {
     marginRight: 6
   },