@app-studio/web 0.3.38 → 0.3.40

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

@@ -1,7 +1,8 @@
 import React, { CSSProperties } from 'react';
 import { Shadow } from 'app-studio';
 import { Elevation } from '../../../utils/elevation';
-import { IconPosition, Shape, Size, Variant } from './Button.type';
+import { IconPosition, Shape, Size, Variant, LoaderPosition } from './Button.type';
+import { LoaderProps } from 'src/components/Loader/Loader/Loader.props';
 /**
  * Represents the properties for the Button component.
  */
@@ -21,7 +22,15 @@ export interface ButtonProps {
     /**
      * Indicates whether the button is in a loading state.
      */
-    isLoader?: boolean;
+    isLoading?: boolean;
+    /**
+     * Indicates whether the button is in a loading state.
+     */
+    loaderProps?: LoaderProps;
+    /**
+     * Specifies the position of the icon within the button.
+     */
+    loaderPosition?: LoaderPosition;
     /**
      * The icon component rendered within the button.
      */

package/dist/web.cjs.development.js

@@ -8,6 +8,8 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var appStudio = require('app-studio');
 var reactRouterDom = require('react-router-dom');
+var Loader$1 = require('src/components/Loader/Loader');
+var Horizontal$1 = require('src/components/Layout/Horizontal/Horizontal');
 var format = _interopDefault(require('date-fns/format'));
 var zustand = require('zustand');
 
@@ -568,7 +570,7 @@ var IconSizes$1 = {
   }
 };
 
-var _excluded$b = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoader", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick"];
+var _excluded$b = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition"];
 var ButtonView = function ButtonView(_ref) {
   var _props$onClick;
   var icon = _ref.icon,
@@ -582,8 +584,8 @@ var ButtonView = function ButtonView(_ref) {
     isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
     _ref$isIconRounded = _ref.isIconRounded,
     isIconRounded = _ref$isIconRounded === void 0 ? false : _ref$isIconRounded,
-    _ref$isLoader = _ref.isLoader,
-    isLoader = _ref$isLoader === void 0 ? false : _ref$isLoader,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$size = _ref.size,
@@ -598,8 +600,12 @@ var ButtonView = function ButtonView(_ref) {
     shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    _ref$loaderProps = _ref.loaderProps,
+    loaderProps = _ref$loaderProps === void 0 ? {} : _ref$loaderProps,
+    _ref$loaderPosition = _ref.loaderPosition,
+    loaderPosition = _ref$loaderPosition === void 0 ? 'left' : _ref$loaderPosition,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  var isActive = !(isDisabled || isLoader);
+  var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
   };
@@ -636,7 +642,9 @@ var ButtonView = function ButtonView(_ref) {
   var changePadding = {
     padding: isIconRounded ? IconSizes$1[size].padding : ButtonSizes[size].padding
   };
-  var content = React__default.createElement(React__default.Fragment, null, icon && iconPosition === 'left' && !isLoader && icon, children, icon && iconPosition === 'right' && !isLoader && icon);
+  var content = React__default.createElement(Horizontal$1.Horizontal, {
+    gap: 4
+  }, isLoading && loaderPosition === 'left' && React__default.createElement(Loader$1.Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon, isLoading && loaderPosition === 'right' && React__default.createElement(Loader$1.Loader, Object.assign({}, loaderProps)));
   return React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
@@ -3366,7 +3374,8 @@ var PasswordComponent = function PasswordComponent(_ref) {
     isVisible = _usePasswordState.isVisible,
     setIsVisible = _usePasswordState.setIsVisible,
     passwordState = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2);
-  return isVisible ? React__default.createElement(TextFieldView, Object.assign({
+  return React__default.createElement(TextFieldView, Object.assign({}, props, passwordState, {
+    type: isVisible ? 'text' : 'password',
     isClearable: false,
     rightChild: React__default.createElement(appStudio.View, {
       onClick: function onClick() {
@@ -3375,17 +3384,6 @@ var PasswordComponent = function PasswordComponent(_ref) {
         }
       }
     }, isVisible ? visibleIcon : hiddenIcon)
-  }, passwordState, props)) : React__default.createElement(TextFieldView, Object.assign({
-    isClearable: false,
-    rightChild: React__default.createElement(appStudio.View, {
-      onClick: function onClick() {
-        if (!props.isDisabled) {
-          setIsVisible(!isVisible);
-        }
-      }
-    }, isVisible ? visibleIcon : hiddenIcon)
-  }, passwordState, props, {
-    type: 'password'
   }));
 };
 /**