@app-studio/web 0.8.53 → 0.8.56

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

@@ -4,7 +4,7 @@ export declare type FileProps = {
     src: string;
     color?: string;
 } & ViewProps;
-export declare const FileSVG: ({ src, color, ...props }: FileProps) => React.JSX.Element;
+export declare const FileSVG: ({ src, color, themeMode: elementMode, ...props }: FileProps) => React.JSX.Element;
 export declare const FileImage: ({ path, ...props }: {
     path: string;
 } & ImageProps) => React.JSX.Element;

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

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

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

@@ -126,6 +126,8 @@ export interface ModalLayoutProps {
     modals: {
         [x: string]: React.FC<any>;
     };
+    onShow?: (name: string, props?: any) => void;
+    onHide?: (name?: string, props?: any) => void;
 }
 export interface ContainerProps extends Omit<ViewProps, 'size'> {
     /**

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

@@ -9,6 +9,10 @@ export interface ModalState {
     modals: ModalItem[];
     show: (name: string, modalProps?: any, overlayProps?: any) => void;
     hide: (name?: string) => void;
+    onShow: (name: string, props?: any) => void;
+    onHide: (name?: string) => void;
+    setOnShow: (onShow: (name: string, props?: any) => void) => void;
+    setOnHide: (onHide: (name?: string) => void) => void;
 }
 export declare const useModalStore: any;
 export declare const showModal: (name: string, modalProps?: any, overlayProps?: any) => void;

package/dist/web.cjs.development.js

@@ -147,7 +147,6 @@ var TextView = _ref3 => {
   } : {};
   var fontSize = appStudio.Typography.fontSizes[size];
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-    role: "text",
     fontSize: fontSize,
     lineHeight: appStudio.Typography.lineHeights[size],
     fontStyle: isItalic ? 'italic' : 'normal',
@@ -2228,19 +2227,23 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$8 = ["size", "speed", "color"],
-  _excluded2$1 = ["size", "speed", "color"],
-  _excluded3$1 = ["size", "speed", "color"],
+var _excluded$8 = ["size", "speed", "color", "themeMode"],
+  _excluded2$1 = ["size", "speed", "color", "themeMode"],
+  _excluded3$1 = ["size", "speed", "color", "themeMode"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
 var DefaultSpinner = _ref => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading'
+      color = 'theme.loading',
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var theme = appStudio.useTheme();
-  var colorStyle = theme.getColor(color);
+  var {
+    getColor,
+    themeMode
+  } = appStudio.useTheme();
+  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = React.useState(0);
   React.useEffect(() => {
@@ -2279,11 +2282,15 @@ var Dotted = _ref2 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading'
+      color = 'theme.loading',
+      themeMode: elementMode
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-  var theme = appStudio.useTheme();
-  var colorStyle = theme.getColor(color);
+  var {
+    getColor,
+    themeMode
+  } = appStudio.useTheme();
+  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = React.useState(0);
   React.useEffect(() => {
@@ -2321,11 +2328,15 @@ var Quarter = _ref3 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading'
+      color = 'theme.loading',
+      themeMode: elementMode
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-  var theme = appStudio.useTheme();
-  var colorStyle = theme.getColor(color);
+  var {
+    getColor,
+    themeMode
+  } = appStudio.useTheme();
+  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = React.useState(0);
   React.useEffect(() => {
@@ -2391,7 +2402,7 @@ React__default.createElement(LoaderView, Object.assign({}, props)));
 // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
 var Loader = LoaderComponent;
 
-var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal"];
+var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode"];
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -2425,14 +2436,16 @@ var ButtonView = _ref => {
       effect = 'default',
       isHovered,
       setIsHovered = () => {},
-      isExternal = false
+      isExternal = false,
+      themeMode: elementMode
       // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var {
-    getColor
+    getColor,
+    themeMode
   } = appStudio.useTheme();
-  var handleHover = () => setIsHovered(!isHovered);
+  var handleHover = over => setIsHovered(over);
   var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
@@ -2440,7 +2453,7 @@ var ButtonView = _ref => {
   var buttonColor = isActive ? colorScheme : 'theme.disabled';
   var hovering = isHovered && effect === 'hover';
   var reverse = isHovered && effect === 'reverse';
-  var isLight = contrast(getColor(buttonColor)) == 'light';
+  var isLight = contrast(getColor(buttonColor, elementMode ? elementMode : themeMode)) == 'light';
   var ButtonVariants = {
     filled: {
       // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
@@ -2491,7 +2504,6 @@ var ButtonView = _ref => {
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
-    role: "button",
     border: "none",
     color: "color.white",
     display: "flex",
@@ -2501,8 +2513,8 @@ var ButtonView = _ref => {
     backgroundColor: buttonColor,
     borderRadius: ButtonShapes[shape],
     onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover,
+    onMouseEnter: () => handleHover(true),
+    onMouseLeave: () => handleHover(false),
     cursor: isActive ? 'pointer' : 'default',
     filter: hovering ? 'brightness(0.85)' : 'brightness(1)'
   }, hovering && !props.isDisabled ? {
@@ -2543,20 +2555,22 @@ var ButtonComponent = props => {
 };
 var Button = ButtonComponent;
 
-var _excluded$a = ["src", "color"],
+var _excluded$a = ["src", "color", "themeMode"],
   _excluded2$2 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
-      color
+      color,
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
-    getColor
+    getColor,
+    themeMode
   } = appStudio.useTheme();
   var Colorprops = color ? {
-    fill: getColor(color),
-    stroke: getColor(color)
+    fill: getColor(color, elementMode ? elementMode : themeMode),
+    stroke: getColor(color, elementMode ? elementMode : themeMode)
   } : {};
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
     content: 'url("' + src + '")',
@@ -2694,13 +2708,13 @@ var PadddingWithLabel = {
   paddingTop: 14,
   paddingBottom: 0,
   paddingLeft: 16,
-  paddingRight: 36
+  paddingRight: 16
 };
 var PaddingWithoutLabel = {
   paddingTop: 10,
   paddingBottom: 4,
   paddingLeft: 16,
-  paddingRight: 36
+  paddingRight: 16
 };
 
 var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
@@ -3660,7 +3674,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
+var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
 var TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "text"
 }, props));
@@ -3701,13 +3715,15 @@ var TextFieldView = _ref => {
       setValue = () => {},
       onClick = () => {},
       onFocus,
-      onBlur = () => {}
+      onBlur = () => {},
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var {
-    getColor
+    getColor,
+    themeMode
   } = appStudio.useTheme();
-  var IconColor = getColor('color.blueGray.700');
+  var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = Object.assign({
     margin: 0,
@@ -5478,7 +5494,7 @@ var IconSizes$4 = {
 
 var _excluded$n = ["size"],
   _excluded2$4 = ["size"],
-  _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
+  _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles", "themeMode"];
 var CountryList = _ref => {
   var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -5590,13 +5606,15 @@ var CountryPickerView = _ref5 => {
         dropDown: {},
         helperText: {},
         box: {}
-      }
+      },
+      themeMode: elementMode
     } = _ref5,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded3$3);
   var {
-    getColor
+    getColor,
+    themeMode
   } = appStudio.useTheme();
-  var IconColor = getColor('color.blueGray.700');
+  var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
   var handleCallback = option => {
@@ -6632,6 +6650,11 @@ var MessageLayout = _ref => {
 
 var useModalStore = /*#__PURE__*/zustand.create(set => ({
   modals: [],
+  onHide: name => name,
+  onShow: (name, props) => ({
+    name,
+    props
+  }),
   show: function show(name, modalProps, overlayProps) {
     if (modalProps === void 0) {
       modalProps = {};
@@ -6639,7 +6662,7 @@ var useModalStore = /*#__PURE__*/zustand.create(set => ({
     if (overlayProps === void 0) {
       overlayProps = {};
     }
-    set(state => ({
+    set(state => Object.assign({}, state, {
       modals: [...state.modals, {
         name,
         props: Object.assign({}, modalProps, {
@@ -6658,10 +6681,20 @@ var useModalStore = /*#__PURE__*/zustand.create(set => ({
         };
       }
       // Hide specific modal by name
-      return {
+      return Object.assign({}, state, {
         modals: state.modals.filter(modal => modal.name !== name)
-      };
+      });
     });
+  },
+  setOnHide: onHide => {
+    set(state => Object.assign({}, state, {
+      onHide
+    }));
+  },
+  setOnShow: onShow => {
+    set(state => Object.assign({}, state, {
+      onShow
+    }));
   }
 }));
 var showModal = function showModal(name, modalProps, overlayProps) {
@@ -6672,9 +6705,11 @@ var showModal = function showModal(name, modalProps, overlayProps) {
     overlayProps = {};
   }
   useModalStore.getState().show(name, modalProps, overlayProps);
+  useModalStore.getState().onShow(name, modalProps);
 };
 var hideModal = name => {
   console.log('hideModal', name);
+  useModalStore.getState().onHide(name);
   useModalStore.getState().hide(typeof name === 'string' ? name : undefined);
 };
 
@@ -6845,9 +6880,17 @@ var ModalFooter = _ref5 => {
 
 var ModalLayout = _ref => {
   var {
-    modals: availableModals
+    modals: availableModals,
+    onShow,
+    onHide
   } = _ref;
   var activeModals = useModalStore(state => state.modals);
+  if (onShow) {
+    useModalStore.getState().setOnShow(onShow);
+  }
+  if (onHide) {
+    useModalStore.getState().setOnHide(onHide);
+  }
   if (activeModals.length === 0) {
     return null;
   }