@draftbit/core 46.5.2-b58416.2 → 46.6.2

package/lib/commonjs/components/TextField.js

@@ -10,10 +10,6 @@ var _theming = require("../theming");
 var _utilities = require("../utilities");
 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const AnimatedText = _reactNative.Animated.createAnimatedComponent(_reactNative.Text);
 const FOCUS_ANIMATION_DURATION = 150;
 const BLUR_ANIMATION_DURATION = 180;
@@ -21,7 +17,7 @@ const ICON_SIZE = 24;
 class TextField extends React.Component {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "state", {
+    this.state = {
       nativeProps: {},
       labeled: new _reactNative.Animated.Value(this.props.value || this.props.error ? 0 : 1),
       focused: false,
@@ -30,47 +26,46 @@ class TextField extends React.Component {
         measured: false,
         width: 0
       }
-    });
-    _defineProperty(this, "_timer", setTimeout(() => {}, 0));
-    _defineProperty(this, "_showPlaceholder", () => {
+    };
+    this._timer = setTimeout(() => {}, 0);
+    this._showPlaceholder = () => {
       clearTimeout(this._timer);
-
       // Set the placeholder in a delay to offset the label animation
       // If we show it immediately, they'll overlap and look ugly
       this._timer = setTimeout(() => this.setState({
         placeholder: this.props.placeholder
       }), 50);
-    });
-    _defineProperty(this, "_hidePlaceholder", () => this.setState({
+    };
+    this._hidePlaceholder = () => this.setState({
       placeholder: ""
-    }));
-    _defineProperty(this, "_restoreLabel", () => _reactNative.Animated.timing(this.state.labeled, {
+    });
+    this._restoreLabel = () => _reactNative.Animated.timing(this.state.labeled, {
       toValue: 1,
       duration: FOCUS_ANIMATION_DURATION,
       useNativeDriver: true
-    }).start());
-    _defineProperty(this, "_minmizeLabel", () => _reactNative.Animated.timing(this.state.labeled, {
+    }).start();
+    this._minmizeLabel = () => _reactNative.Animated.timing(this.state.labeled, {
       toValue: 0,
       duration: BLUR_ANIMATION_DURATION,
       useNativeDriver: true
-    }).start());
-    _defineProperty(this, "_handleFocus", () => {
+    }).start();
+    this._handleFocus = () => {
       if (this.props.disabled) {
         return;
       }
       this.setState({
         focused: true
       });
-    });
-    _defineProperty(this, "_handleBlur", () => {
+    };
+    this._handleBlur = () => {
       if (this.props.disabled) {
         return;
       }
       this.setState({
         focused: false
       });
-    });
-    _defineProperty(this, "_handleChangeText", value => {
+    };
+    this._handleChangeText = value => {
       if (this.props.disabled) {
         return;
       }
@@ -85,8 +80,8 @@ class TextField extends React.Component {
         });
         this.props.onChangeText && this.props.onChangeText(value.nativeEvent.text);
       }
-    });
-    _defineProperty(this, "_root", undefined);
+    };
+    this._root = undefined;
   }
   static getDerivedStateFromProps(nextProps, prevState) {
     return {
@@ -173,7 +168,9 @@ class TextField extends React.Component {
         roundness,
         disabledOpacity
       },
-      render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, props),
+      render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, {
+        ...props
+      }),
       ...rest
     } = this.props;
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
@@ -313,9 +310,10 @@ class TextField extends React.Component {
     } = _reactNative.StyleSheet.flatten(style || {});
     return /*#__PURE__*/React.createElement(_reactNative.View, {
       style: [styles.container, styleProp]
-    }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
+    }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
+      ...leftIconProps,
       style: leftIconStyle
-    })) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    }) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
       style: (0, _utilities.applyStyles)([containerStyle], {
         height: style === null || style === void 0 ? void 0 : style.height,
         backgroundColor: bgColor,
@@ -383,9 +381,10 @@ class TextField extends React.Component {
       style: {
         justifyContent: type === "solid" ? "center" : undefined
       }
-    }, /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      ...leftIconProps,
       style: leftIconStyle
-    }))) : null, render({
+    })) : null, render({
       ref: c => {
         this._root = c;
       },
@@ -423,6 +422,55 @@ class TextField extends React.Component {
 }
 var _default = (0, _theming.withTheme)(TextField);
 exports.default = _default;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  },
+  placeholder: {
+    position: "absolute",
+    left: 0
+  },
+  underline: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 2
+  },
+  input: {
+    flexGrow: 1,
+    justifyContent: "center",
+    textAlignVertical: "center",
+    margin: 0,
+    textAlign: _reactNative.I18nManager.isRTL ? "right" : "left"
+  }
+});_handleFocus,
+      onBlur: this._handleBlur,
+      underlineColorAndroid: "transparent",
+      style: inputStyles,
+      ...rest,
+      ...this.state.nativeProps,
+      value: this.state.value
+    })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
+      name: rightIconName,
+      size: ICON_SIZE,
+      color: colors.light,
+      style: {
+        position: "absolute",
+        right: 16,
+        marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16
+      }
+    }) : null, assistiveText ? /*#__PURE__*/React.createElement(_reactNative.Text, {
+      style: [{
+        color: error ? colors.error : colors.light,
+        marginTop: 8,
+        marginLeft: assistiveTextLeftMargin
+      }]
+    }, assistiveText) : null);
+  }
+}
+var _default = (0, _theming.withTheme)(TextField);
+exports.default = _default;
 const styles = _reactNative.StyleSheet.create({
   container: {
     alignSelf: "stretch"

package/lib/commonjs/components/ToggleButton.js

@@ -11,7 +11,6 @@ var _IconButton = _interopRequireDefault(require("./IconButton"));
 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 ToggleButton = _ref => {
   let {
     Icon,
@@ -47,7 +46,7 @@ const ToggleButton = _ref => {
     setInternalValue(!internalValue);
     onPress(!internalValue);
   };
-  return /*#__PURE__*/React.createElement(_IconButton.default, _extends({
+  return /*#__PURE__*/React.createElement(_IconButton.default, {
     Icon: Icon,
     icon: icon,
     size: iconSize,
@@ -59,6 +58,20 @@ const ToggleButton = _ref => {
       height,
       backgroundColor: internalValue ? colors[colorSecondary] : colors[color],
       borderColor: colors[borderColor]
+    }, style],
+    ...rest
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  mainContainer: {
+    borderWidth: 1
+  }
+});
+var _default = (0, _theming.withTheme)(ToggleButton);
+exports.default = _default;idth,
+      height,
+      backgroundColor: internalValue ? colors[colorSecondary] : colors[color],
+      borderColor: colors[borderColor]
     }, style]
   }, rest));
 };

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

@@ -10,12 +10,11 @@ function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable
   // and can hold any value, similar to an instance property on a class
   const ref = _react.default.useRef();
-
   // Store current value in ref
   _react.default.useEffect(() => {
     ref.current = value;
   }, [value]);
-
   // Return previous value (happens before update in useEffect above)
   return ref.current;
+}
 }

package/lib/commonjs/index.js

@@ -225,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 () {
@@ -438,6 +444,7 @@ var _Switch = _interopRequireWildcard(require("./components/Switch"));
 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 _ActionSheet = require("./components/ActionSheet");
 var _Swiper = require("./components/Swiper");

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

@@ -23,9 +23,7 @@ const SEED_DATA = {
     }),
     fieldName: (0, _types.createFieldNameProp)({
       defaultValue: "ratingValue",
-      // this is the name of the variable declared on the screen in Draftbit
       handlerPropName: "onPress",
-      // the change handler prop in this component
       valuePropName: "rating" // the value prop in this component
     }),
 
@@ -50,4 +48,10 @@ const SEED_DATA = {
     })
   }
 };
+exports.SEED_DATA = SEED_DATA;pes.createColorProp)({
+      label: "Inactive Color",
+      defaultValue: "divider"
+    })
+  }
+};
 exports.SEED_DATA = SEED_DATA;

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"

package/lib/commonjs/mappings/Touchable.js

@@ -5,16 +5,56 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SEED_DATA = void 0;
 var _types = require("@draftbit/types");
-const SEED_DATA = {
-  name: "Touchable",
-  tag: "Touchable",
-  description: "Simple button with no styles",
-  category: _types.COMPONENT_TYPES.button,
+const SEED_DATA_PROPS = {
   stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Borders],
   layout: {},
-  triggers: [_types.Triggers.OnPress],
+  triggers: [_types.Triggers.OnPress, _types.Triggers.OnLongPress],
   props: {
-    onPress: (0, _types.createActionProp)()
+    onPress: (0, _types.createActionProp)(),
+    onLongPress: (0, _types.createActionProp)(),
+    activeOpacity: (0, _types.createStaticNumberProp)({
+      label: "Active Opacity",
+      description: "The opacity when the button is pressed.",
+      defaultValue: 0.8,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      required: false
+    }),
+    disabledOpacity: (0, _types.createStaticNumberProp)({
+      label: "Disabled Opacity",
+      description: "The opacity when the button is 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: "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.button,
+  ...SEED_DATA_PROPS
+}];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/styles/overlay.js

@@ -15,7 +15,6 @@ function overlay(elevation) {
   let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
   if (isAnimatedValue(elevation)) {
     const inputRange = [0, 1, 2, 3, 8, 24];
-
     // @ts-expect-error: TS doesn't seem to refine the type correctly
     return elevation.interpolate({
       inputRange,
@@ -24,7 +23,6 @@ function overlay(elevation) {
       })
     });
   }
-
   // @ts-expect-error: TS doesn't seem to refine the type correctly
   return calculateColor(surfaceColor, elevation);
 }
@@ -65,4 +63,4 @@ const elevationOverlayTransparency = {
   22: 15.72,
   23: 15.84,
   24: 16
-};
+};};

package/lib/commonjs/utilities.js

@@ -57,7 +57,6 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
     marginStyles
   };
 }
-
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles
@@ -90,4 +89,4 @@ function getValueForRadioButton(value) {
   } else {
     throw new Error("Invalid value: ".concat(value));
   }
-}
+}}

package/lib/module/components/AnimatedCircularProgress.js

@@ -1,4 +1,3 @@
-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 { Animated, Easing } from "react-native";
 import CircularProgress from "./CircularProgress";
@@ -46,6 +45,19 @@ const AnimatedCircularProgress = _ref => {
   React.useEffect(() => {
     animate();
   }, [fill, animate]);
+  return /*#__PURE__*/React.createElement(AnimatedProgress, {
+    ...other,
+    style: other.style,
+    childrenContainerStyle: other.childrenContainerStyle,
+    fill: fillAnimation,
+    tintColor: animateColor()
+  });
+};
+export default AnimatedCircularProgress;imation;
+  };
+  React.useEffect(() => {
+    animate();
+  }, [fill, animate]);
   return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
     style: other.style,
     childrenContainerStyle: other.childrenContainerStyle,

package/lib/module/components/AspectRatio.js

@@ -1,4 +1,3 @@
-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 React from "react";
 import { View, StyleSheet } from "react-native";
 const AspectRatio = props => {
@@ -27,6 +26,24 @@ const AspectRatio = props => {
       });
     }
   }
+  return /*#__PURE__*/React.createElement(View, {
+    ...props,
+    style: style,
+    onLayout: _ref => {
+      let {
+        nativeEvent: {
+          layout: l
+        }
+      } = _ref;
+      return setLayout(l);
+    }
+  }, props.children);
+};
+export default AspectRatio;idth,
+        height: width * (1 / aspectRatio)
+      });
+    }
+  }
   return /*#__PURE__*/React.createElement(View, _extends({}, props, {
     style: style,
     onLayout: _ref => {