@app-studio/web 0.3.7 → 0.3.11

package/dist/GlobalStyle.d.ts

@@ -1,2 +1,3 @@
-declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+/// <reference types="react" />
+declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
 export default GlobalStyle;

package/dist/assets/svg/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/components/File/File.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const FileSVG: ({ src, color, ...props }: {
+    src: string;
+    color?: string | undefined;
+}) => React.JSX.Element;
+export declare const FileImage: ({ path, ...props }: {
+    path: string;
+}) => React.JSX.Element;

package/dist/components/Form/Checkbox/Checkbox/Checkbox.state.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CheckboxProps } from './Checkbox.props';
-export declare const useCheckboxState: ({ defaultIsSelected }: CheckboxProps) => {
+export declare const useCheckboxState: ({ defaultIsSelected, }: CheckboxProps) => {
     isHovered: boolean;
     setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
     isSelected: boolean;

package/dist/components/Form/Select/Select/Select.state.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SelectProps } from './Select.props';
-export declare const useSelectState: ({ placeholder, isMulti, options }: SelectProps) => {
+export declare const useSelectState: ({ placeholder, isMulti, options, }: SelectProps) => {
     selected: string | string[];
     setSelected: React.Dispatch<React.SetStateAction<string | string[]>>;
     hide: boolean;

package/dist/components/Form/TextArea/TextArea/TextArea.state.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextAreaProps } from './TextArea.props';
-export declare const useTextAreaState: ({ label, placeholder, defaultValue, value }: TextAreaProps) => {
+export declare const useTextAreaState: ({ label, placeholder, defaultValue, value, }: TextAreaProps) => {
     hint: string | undefined;
     setHint: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     isHovered: boolean;

package/dist/components/Form/TextField/TextField/TextField.state.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextFieldProps } from './TextField.props';
-export declare const useTextFieldState: ({ label, placeholder, value }: TextFieldProps) => {
+export declare const useTextFieldState: ({ label, placeholder, value, }: TextFieldProps) => {
     hint: string | undefined;
     setHint: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     isFocused: boolean;

package/dist/components/Layout/View/View.d.ts

@@ -1,2 +1,8 @@
+import React from 'react';
 export type { ViewProps } from 'app-studio';
-export { View } from 'app-studio';
+export declare const Top: (props: any) => React.JSX.Element;
+export declare const Bottom: (props: any) => React.JSX.Element;
+export declare const Left: (props: any) => React.JSX.Element;
+export declare const Right: (props: any) => React.JSX.Element;
+export declare const Inline: (props: any) => React.JSX.Element;
+export declare const View: (props: import("app-studio").ViewProps) => React.JSX.Element;

package/dist/components/Message/Examples/CloseButtonMessage.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CloseButtonMessage: () => React.JSX.Element;

package/dist/components/Message/Examples/DefaultMessage.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DefaultMessage: () => React.JSX.Element;

package/dist/components/Message/Examples/VariantMessage.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VariantMessage: () => React.JSX.Element;

package/dist/components/Message/Examples/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../../Message/Examples/CloseButtonMessage';
+export * from '../../Message/Examples/DefaultMessage';
+export * from '../../Message/Examples/VariantMessage';

package/dist/components/Message/Message/Message.layout.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MessageLayoutProps } from './Message.props';
+export declare const MessageLayout: ({ container, icons, text, icon, }: MessageLayoutProps) => React.JSX.Element | null;

package/dist/components/Message/Message/Message.props.d.ts

@@ -0,0 +1,115 @@
+import React, { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+import { CloseButtonPosition, Position, Shape, Size } from './Message.type';
+export interface MessageProps {
+    /**
+     * The content to be displayed inside the message.
+     */
+    children: React.ReactNode;
+    /**
+     * The color of the close button in the header.
+     */
+    buttonColor?: string;
+    /**
+     * The size of the close button in the header.
+     */
+    iconSize?: Size;
+    /**
+     * Determines whether the message should have sharp or rounded edges.
+     */
+    shape?: Shape;
+    /**
+     * If set to true, the message will occupy the full width and height of the screen.
+     */
+    isFullScreen?: boolean;
+    /**
+     * Indicates the presence of a close button and its position within the header.
+     */
+    buttonPosition?: CloseButtonPosition;
+    /**
+     * The callback function to be executed when the close button is clicked or pressed.
+     */
+    onClose?: () => void;
+    /**
+     * The degree of blurriness applied to the overlay.
+     */
+    blur?: number;
+    /**
+     * If set to true, the message will be visible.
+     */
+    isOpen?: boolean;
+    /**
+     * If set to true, the message will remain open when the overlay is clicked.
+     */
+    isClosePrevented?: boolean;
+    /**
+     * The positioning of the message container.
+     */
+    position?: Position;
+    /**
+     * Applies a shadow effect to the button.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Additional properties.
+     */
+    [x: string]: any;
+}
+export interface MessageType extends React.FunctionComponent<MessageProps> {
+    /**
+     * The container component of the message.
+     */
+    Container: React.FC<ContainerProps>;
+    /**
+     * The body component of the message.
+     */
+    Body: React.FC<BodyProps>;
+    /**
+     * The header component of the message.
+     */
+    Layout: React.FC<MessageLayoutProps>;
+}
+export interface MessageLayoutProps {
+    icons?: {
+        [x: string]: string;
+    };
+    container?: any;
+    text?: React.JSX.Element | React.FC<any>;
+    icon?: React.JSX.Element | React.FC<any>;
+    theme: {
+        [x: string]: any;
+    };
+}
+export interface ContainerProps {
+    /**
+     * The content of the message container
+     */
+    children: React.ReactNode;
+    /**
+     * To give a sharp or rounded edges to the message
+     */
+    shape?: Shape;
+    /**
+     * If true, the message will take the full width and height
+     */
+    isFullScreen?: boolean;
+    /**
+     * Set a shadow effect on the button.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}
+export interface BodyProps {
+    /**
+     * The content of the Body
+     */
+    children?: React.ReactNode;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}

package/dist/components/Message/Message/Message.store.d.ts

@@ -0,0 +1,10 @@
+export interface MessageState {
+    visible: boolean;
+    variant?: string;
+    message: string;
+    show: (variant?: string, message?: string) => void;
+    hide: () => void;
+}
+export declare const useMessageStore: any;
+export declare const showMessage: (variant: string, message?: string | undefined) => void;
+export declare const hideMessage: () => void;

package/dist/components/Message/Message/Message.style.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+import { Position, Shape, Size } from './Message.type';
+export declare const ContainerShapes: Record<Shape, CSSProperties>;
+export declare const OverlayAlignments: Record<Position, CSSProperties>;
+export declare const HeaderIconSizes: Record<Size, number>;

package/dist/components/Message/Message/Message.view.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface IMessage {
+    message: string;
+    variant?: string;
+    show?: boolean;
+    hide: Function;
+    closable?: boolean;
+    timeout?: number;
+    props?: any;
+    icons?: Record<string, string>;
+    text?: any;
+    icon?: any;
+    theme?: Record<string, any>;
+    iconProps?: any;
+    textProps?: any;
+    containerProps?: any;
+}
+export declare const MessageView: ({ variant, message, hide, props, timeout, closable, icons, text, theme, icon, }: IMessage) => React.JSX.Element;
+export {};

package/dist/components/Message/Message.d.ts

@@ -0,0 +1,2 @@
+export { MessageLayout } from './Message/Message.layout';
+export { MessageView } from './Message/Message.view';

package/dist/components/Modal/Modal/Modal.layout.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalLayoutProps } from './Modal.props';
+export declare const ModalLayout: ({ modals }: ModalLayoutProps) => React.JSX.Element | null;

package/dist/components/Modal/Modal/Modal.props.d.ts

@@ -77,6 +77,10 @@ export interface ModalType extends React.FunctionComponent<ModalProps> {
      * The footer component of the modal.
      */
     Footer: React.FC<FooterProps>;
+    /**
+     * The header component of the modal.
+     */
+    Layout: React.FC<ModalLayoutProps>;
 }
 export interface OverlayProps {
     /**
@@ -134,6 +138,11 @@ export interface HeaderProps {
      */
     [x: string]: any;
 }
+export interface ModalLayoutProps {
+    modals: {
+        [x: string]: React.FC<any>;
+    };
+}
 export interface ContainerProps {
     /**
      * The content of the modal container

package/dist/components/Modal/Modal/Modal.store.d.ts

@@ -1 +1,12 @@
+export interface ModalState {
+    modal: string | boolean;
+    modalProps: any & {
+        isVisible: boolean;
+    };
+    overlayProps: any;
+    show: (modal: string, modalProps?: any, overlayProps?: any) => void;
+    hide: () => void;
+}
 export declare const useModalStore: any;
+export declare const showModal: (modal: string, modalProps?: any, overlayProps?: any) => void;
+export declare const hideModal: () => void;

package/dist/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './Link/Link';
 export * from './Loader/Loader';
 export * from './Modal/Modal';
 export * from './Text/Text';
+export * from './File/File';

package/dist/pages/message.page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ModalPage: () => React.JSX.Element;
+export default ModalPage;

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",
@@ -3283,7 +3311,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);
       }
@@ -3891,7 +3919,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 +3928,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) {
@@ -4286,9 +4314,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 +4331,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 +4422,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 +4434,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 +4489,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 +4518,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 +4536,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 +4576,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