@app-studio/web 0.3.7 → 0.3.12

package/dist/web.cjs.development.js

@@ -58,6 +58,34 @@ var useLinkState = function useLinkState() {
   };
 };
 
+var Top = function Top(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginBottom: "auto"
+  }, props));
+};
+var Bottom = function Bottom(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginTop: "auto"
+  }, props));
+};
+var Left = function Left(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginRight: "auto"
+  }, props));
+};
+var Right = function Right(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginLeft: "auto"
+  }, props));
+};
+var Inline = function Inline(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    display: 'inline-flex',
+    wordBreak: "break-word"
+  }, props));
+};
+var View = appStudio.View;
+
 var _excluded = ["children", "wrap", "justify", "isReversed"];
 var HorizontalView = function HorizontalView(_ref) {
   var children = _ref.children,
@@ -68,7 +96,7 @@ var HorizontalView = function HorizontalView(_ref) {
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React__default.createElement(appStudio.View, Object.assign({
+  return React__default.createElement(View, Object.assign({
     display: "flex",
     flexWrap: wrap,
     flexDirection: isReversed ? 'row-reverse' : 'row',
@@ -89,7 +117,7 @@ var CenterView = function CenterView(_ref) {
   var children = _ref.children,
     wrap = _ref.wrap,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React__default.createElement(appStudio.View, Object.assign({
+  return React__default.createElement(View, Object.assign({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -2448,21 +2476,19 @@ var TextComponent = function TextComponent(props) {
  */
 var Text = TextComponent;
 
-var _excluded$e = ["children", "styles", "error"];
+var _excluded$e = ["children", "styles"];
 var HelperText = function HelperText(_ref) {
   var children = _ref.children,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
       helperText: {}
     } : _ref$styles,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
     marginHorizontal: 0,
-    color: error ? 'theme.error' : 'theme.text.dark'
+    color: 'theme.text.dark'
   }, styles['helperText'], props), children);
 };
 
@@ -2477,9 +2503,12 @@ var FieldContainer = function FieldContainer(_ref) {
   return React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
-  }, props), children, helperText && React__default.createElement(HelperText, Object.assign({
-    error: error
-  }, styles), helperText));
+  }, props), children, !error && helperText && React__default.createElement(HelperText, Object.assign({}, styles), helperText), error && React__default.createElement(Text, {
+    size: "xs",
+    marginVertical: 0,
+    marginHorizontal: 0,
+    color: 'theme.error'
+  }, error));
 };
 
 var Shapes = {
@@ -2570,7 +2599,7 @@ var FieldContent = function FieldContent(_ref) {
     borderStyle: "solid",
     alignItems: "center",
     borderColor: color,
-    backgroundColor: "trueGray.50",
+    backgroundColor: "color.trueGray.50",
     transition: "padding 0.2s ease",
     justifyContent: "space-between",
     fontSize: appStudio.Typography.fontSizes[size],
@@ -2995,7 +3024,7 @@ var DatePickerView = function DatePickerView(_ref) {
     },
     fontSize: appStudio.Typography.fontSizes[size],
     backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
   }, styles['field']);
   return React__default.createElement(FieldContainer, {
@@ -3283,7 +3312,7 @@ var PasswordView = function PasswordView(_ref) {
   return React__default.createElement(TextField, Object.assign({
     name: name,
     type: isVisible ? 'text' : 'password',
-    rightChild: React__default.createElement(appStudio.View, {
+    rightChild: React__default.createElement(View, {
       onClick: function onClick() {
         if (!isDisabled) setIsVisible(!isVisible);
       }
@@ -3403,7 +3432,7 @@ var SelectBox = function SelectBox(_ref2) {
     paddingHorizontal: 0,
     fontSize: appStudio.Typography.fontSizes[size],
     backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field'], styles['text']);
   return React__default.createElement(Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : React__default.createElement(React__default.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && React__default.createElement(Horizontal, {
@@ -3521,7 +3550,7 @@ var MultiSelect = function MultiSelect(_ref5) {
     borderRadius: 4,
     alignItems: "center",
     fontSize: appStudio.Typography.fontSizes[size],
-    backgroundColor: "trueGray.300",
+    backgroundColor: "color.trueGray.300",
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
@@ -3891,7 +3920,7 @@ var SwitchView = function SwitchView(_ref) {
     readOnly: isReadOnly
   }, onValueChange && {
     onValueChange: handleToggle
-  }, props)), React__default.createElement(appStudio.View, Object.assign({
+  }, props)), React__default.createElement(View, Object.assign({
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
@@ -3900,10 +3929,10 @@ var SwitchView = function SwitchView(_ref) {
     transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
     backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
     justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
-  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && React__default.createElement(appStudio.View, null, activeChild), React__default.createElement(appStudio.View, Object.assign({
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && React__default.createElement(View, null, activeChild), React__default.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && React__default.createElement(appStudio.View, null, inActiveChild)));
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && React__default.createElement(View, null, inActiveChild)));
 };
 
 var SwitchComponent = function SwitchComponent(props) {
@@ -4018,7 +4047,7 @@ var TextAreaView = function TextAreaView(_ref) {
     },
     fontSize: appStudio.Typography.fontSizes[size],
     backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field']);
   var handleHover = function handleHover() {
@@ -4286,9 +4315,9 @@ var LoaderView = function LoaderView(_ref4) {
   return React__default.createElement(Center, Object.assign({
     gap: 10,
     flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
-  }, props), (textPosition === 'left' || textPosition === 'top') && children && React__default.createElement(appStudio.View, {
+  }, props), (textPosition === 'left' || textPosition === 'top') && children && React__default.createElement(View, {
     color: textColor
-  }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && React__default.createElement(appStudio.View, {
+  }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && React__default.createElement(View, {
     color: textColor
   }, children));
 };
@@ -4303,31 +4332,43 @@ var Loader = LoaderComponent;
 
 var useModalStore = /*#__PURE__*/zustand.create(function (set) {
   return {
-    isOpen: false,
-    onClose: function onClose() {},
-    toggleModal: function toggleModal() {
-      return set(function (state) {
-        return {
-          isOpen: !state.isOpen
-        };
-      });
+    modal: false,
+    modalProps: {
+      isVisible: false
     },
-    setOpen: function setOpen(isOpen) {
-      return set(function () {
-        return {
-          isOpen: isOpen
-        };
+    overlayProps: {},
+    show: function show(modal, modalProps, overlayProps) {
+      if (modalProps === void 0) {
+        modalProps = {};
+      }
+      if (overlayProps === void 0) {
+        overlayProps = {};
+      }
+      if (modal) {
+        modalProps.isVisible = true;
+      }
+      set(function (state) {
+        return _extends({}, state, {
+          modal: modal,
+          modalProps: modalProps,
+          overlayProps: overlayProps
+        });
       });
     },
-    setOnClose: function setOnClose(onClose) {
-      return set(function () {
-        return {
-          onClose: onClose
-        };
+    hide: function hide() {
+      set(function (state) {
+        return _extends({}, state, {
+          modalProps: {
+            isVisible: false
+          }
+        });
       });
     }
   };
 });
+var hideModal = function hideModal() {
+  useModalStore.getState().hide();
+};
 
 var ContainerShapes = {
   sharp: {
@@ -4382,17 +4423,6 @@ var ModalOverlay = function ModalOverlay(_ref) {
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
-  var setOpen = useModalStore(function (state) {
-    return state.setOpen;
-  });
-  var setOnClose = useModalStore(function (state) {
-    return state.setOnClose;
-  });
-  React.useEffect(function () {
-    setOnClose(onClose);
-    if (isOpen) setOpen();
-  });
-  if (!isOpen) return null;
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4405,7 +4435,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     zIndex: 1000,
     onClick: handleClick,
     visibility: isOpen ? 'visible' : 'hidden'
-  }, React__default.createElement(appStudio.View, Object.assign({
+  }, React__default.createElement(View, Object.assign({
     cursor: "pointer",
     position: "absolute",
     top: 0,
@@ -4460,9 +4490,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     _ref3$buttonPosition = _ref3.buttonPosition,
     buttonPosition = _ref3$buttonPosition === void 0 ? 'right' : _ref3$buttonPosition,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
-  var onClose = useModalStore(function (state) {
-    return state.onClose;
-  });
+  var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = React__default.createElement(Button, {
     onClick: onClose,
     colorScheme: "transparent",
@@ -4491,7 +4519,7 @@ var ModalBody = function ModalBody(_ref4) {
     borderColor: 'rgba(250, 250, 250, 1)',
     borderStyle: 'solid'
   };
-  return React__default.createElement(appStudio.View, Object.assign({
+  return React__default.createElement(View, Object.assign({
     overflowY: "auto",
     paddingVertical: 15,
     paddingHorizontal: 20
@@ -4509,6 +4537,33 @@ var ModalFooter = function ModalFooter(_ref5) {
   }, props), children);
 };
 
+var ModalLayout = function ModalLayout(_ref) {
+  var modals = _ref.modals;
+  var modalStore = useModalStore(function (_ref2) {
+    var modal = _ref2.modal,
+      modalProps = _ref2.modalProps,
+      overlayProps = _ref2.overlayProps;
+    return {
+      modal: modal,
+      modalProps: modalProps,
+      overlayProps: overlayProps
+    };
+  });
+  if (typeof modalStore.modal === 'boolean') {
+    return null;
+  }
+  var Modal = modals[modalStore.modal];
+  if (!Modal) {
+    console.error(modalStore.modal + " modal doesn't exist");
+    return null;
+  }
+  return React__default.createElement(React.Fragment, null, React__default.createElement(ModalOverlay, Object.assign({
+    isOpen: modalStore.modalProps.isVisible,
+    onClose: hideModal,
+    blur: 10
+  }, modalStore.overlayProps), Modal !== undefined && React__default.createElement(Modal, Object.assign({}, modalStore.modalProps))));
+};
+
 /**
  * It is a custom content overlay that appears on top of the main screen.
  */
@@ -4522,27 +4577,56 @@ Modal.Container = ModalContainer;
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
+Modal.Layout = ModalLayout;
 
-Object.defineProperty(exports, 'View', {
-  enumerable: true,
-  get: function () {
-    return appStudio.View;
-  }
-});
+var _excluded$t = ["src", "color"],
+  _excluded2$3 = ["path"];
+var FileSVG = function FileSVG(_ref) {
+  var src = _ref.src,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+  var _useTheme = appStudio.useTheme(),
+    getColor = _useTheme.getColor;
+  var Colorprops = color ? {
+    fill: getColor(color),
+    stroke: getColor(color)
+  } : {};
+  return React__default.createElement(Center, Object.assign({}, props), React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
+    content: 'url("' + src + '")',
+    width: "100%",
+    height: "100%"
+  })));
+};
+var FileImage = function FileImage(_ref2) {
+  var path = _ref2.path,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  return React__default.createElement(appStudio.Image, Object.assign({
+    src: path
+  }, props));
+};
+
+exports.Bottom = Bottom;
 exports.Button = Button;
 exports.Center = Center;
 exports.Checkbox = Checkbox;
 exports.CountryPicker = CountryPicker;
 exports.DatePicker = DatePicker;
+exports.FileImage = FileImage;
+exports.FileSVG = FileSVG;
 exports.Horizontal = Horizontal;
+exports.Inline = Inline;
+exports.Left = Left;
 exports.Link = Link;
 exports.Loader = Loader;
 exports.Modal = Modal;
 exports.Password = Password;
+exports.Right = Right;
 exports.Select = Select;
 exports.Switch = Switch;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextField = TextField;
+exports.Top = Top;
 exports.Vertical = Vertical;
+exports.View = View;
 //# sourceMappingURL=web.cjs.development.js.map