acud 0.0.67 → 0.0.70

package/es/date-picker/style/panel.less

@@ -20,6 +20,7 @@
             line-height: 8*@P;
             color: @G2;
             > li {
+                .basic-tp-config(@date-picker-header-tp);
                 margin-right: 6*@P;
                 display: inline-block;
                 cursor: pointer;
@@ -28,7 +29,7 @@
 
         &.@{picker-prefix-cls}-panel-has-range {
             .@{picker-prefix-cls}-date-panel .@{picker-prefix-cls}-content td:not(.@{picker-prefix-cls}-cell-range-hover-start):not(.@{picker-prefix-cls}-cell-range-hover-end):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-range-end):not(.@{picker-prefix-cls}-cell-today):hover {
-                background-color: @G10 !important;
+                // background-color: @G10 !important;
 
                 .@{picker-prefix-cls}-cell-inner {
                     background-color: @G10 !important;
@@ -53,7 +54,7 @@
         width: @date-picker-panel-width;
     }
 
-    &-month-panel {
+    &-month-panel, &-year-panel {
         .@{picker-prefix-cls}-cell-in-range, .@{picker-prefix-cls}-cell-range-hover {
             &:not(:first-child)::before {
                 width: 3*@P;
@@ -62,17 +63,21 @@
             }
         }
         .@{picker-prefix-cls}-cell-in-view {
-            &.@{picker-prefix-cls}-cell-in-range {
+            &.@{picker-prefix-cls}-cell-in-range { 
                 &.@{picker-prefix-cls}-cell-range-hover-end, &.@{picker-prefix-cls}-cell-range-hover-start {
                     &:hover {
-                        background-color: @B2;
+                        .@{picker-prefix-cls}-cell-inner {
+                            background-color: @B2;
+                        }
                     }
                 }
             }
 
             &.@{picker-prefix-cls}-cell-range-hover-end, &.@{picker-prefix-cls}-cell-range-hover-start {
-                &:hover {
-                    background: @picker-basic-cell-active-with-range-color;
+                &:not(.@{picker-prefix-cls}-cell-in-range):not(.@{picker-prefix-cls}-cell-selected):not(.@{picker-prefix-cls}-cell-range-end):not(.@{picker-prefix-cls}-cell-range-start):hover {
+                    .@{picker-prefix-cls}-cell-inner {
+                        background: @picker-basic-cell-active-with-range-color;
+                    }
                 }
             }
         }
@@ -123,8 +128,10 @@
             .basic-tp-config(@date-picker-date-tp);
 
             button {
+                font-size: @T2;
                 color: inherit;
-                font-weight: inherit;
+                font-weight: 400;
+                .basic-tp-config(@date-picker-header-tp);
 
                 &:not(:first-child) {
                     margin-left: 2*@P;
@@ -227,7 +234,7 @@
         }
 
         td {
-            .basic-p-config(@date-picker-date-p);
+            // .basic-p-config(@date-picker-date-p);
         }
     }
 
@@ -279,7 +286,7 @@
             }
         }
 
-        &-today:not(&-in-range):not(&-range-hover):not(&-range-end):not(&-selected):not(&-range-start) {
+        &-today:not(&-in-range):not(&-range-hover):not(&-range-end):not(&-selected):not(&-range-start):not(&-disabled) {
             background-color: transparent !important;
             .@{picker-prefix-cls}-cell-inner {
                 background-color: transparent !important;
@@ -344,6 +351,12 @@
             }
         }
 
+        &-in-view&-range-start&-range-end {
+            &::before {
+                background: transparent;
+            }
+        }
+
         &-in-view&-range-start&-range-end&-selected, &-in-view&-range-start&-range-hover-start&-range-hover-end {
             &::before {
                 background: transparent !important;
@@ -421,6 +434,10 @@
             left: 0;
         }
 
+        .@{picker-prefix-cls}-date-panel &-in-view&-range-hover:not(:first-child)::before {
+            left: -3*@P + 3;
+        }
+
         // Hover with range start & end
         &-range-hover&-range-start::after {
             right: 50%;
@@ -529,7 +546,7 @@
 
     &-date-panel {
         .@{picker-prefix-cls}-content td:hover {
-            border-radius: @R2;
+            // border-radius: @R2;
 
             // &:not(.@{picker-prefix-cls}-cell-in-range) {
             //     background-color: transparent;
@@ -569,9 +586,11 @@
         }
 
         .@{picker-prefix-cls}-cell-in-view {
-            &.@{picker-prefix-cls}-cell-range-hover-end, &.@{picker-prefix-cls}-cell-range-hover-start {
+            &.@{picker-prefix-cls}-cell-range-hover-end:not(.@{picker-prefix-cls}-cell-range-end), &.@{picker-prefix-cls}-cell-range-hover-start:not(.@{picker-prefix-cls}-cell-range-start) {
                 &:hover {
-                    background-color: @picker-basic-cell-active-with-range-color;
+                    .@{picker-prefix-cls}-cell-inner {
+                        background-color: @picker-basic-cell-active-with-range-color;
+                    }
                 }
             }
         }
@@ -584,6 +603,9 @@
         // line-height: @picker-text-height - 2 * @border-width-base;
         text-align: center;
         border-top: 1px solid @G8;
+        font-size: @T2;
+        line-height: 24px;
+        cursor: pointer;
         // border-bottom: @border-width-base @border-style-base transparent;
 
         .@{picker-prefix-cls}-panel & {
@@ -628,8 +650,23 @@
 
     // ===================== Decade Panel =====================
     &-decade-panel {
-        .@{picker-cell-inner-cls} {
-            padding: 0 (@padding-xs / 2);
+        tr {
+            display: block;
+            margin: 3*@P 0;
+
+            td {
+                display: inline-block;
+                margin-right: 3*@P;
+                width: 79px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+
+            .@{picker-cell-inner-cls} {
+                width: 100%;
+            }
         }
 
         .@{picker-prefix-cls}-cell::before {
@@ -650,7 +687,7 @@
             td {
                 display: inline-block;
                 margin-right: 3*@P;
-                border-radius: @R2;
+                // border-radius: @R2;
 
                 &:last-child {
                     margin-right: 0;
@@ -695,6 +732,14 @@
         .@{picker-prefix-cls}-date-panel {
             width: 234px;
         }
+
+        .@{picker-prefix-cls}-decade-panel {
+            width: 285px;
+
+            .@{picker-prefix-cls}-header, .@{picker-prefix-cls}-body {
+                padding-right: 12px !important;
+            }
+        }
     }
 
     // ====================== Week Panel ======================
@@ -741,7 +786,7 @@
         }
     }
 
-    &-date-panel, &-month-panel {
+    &-date-panel, &-month-panel, &-year-panel {
         tr {
             td.@{picker-prefix-cls}-cell-in-view.@{picker-prefix-cls}-cell-in-range, td.@{picker-prefix-cls}-cell-range-hover {
                 &:first-child {
@@ -753,8 +798,28 @@
                 }
             }
 
-            td.@{picker-prefix-cls}-cell-range-hover-end {
-                border-radius: 0 @R2 @R2 0;
+            td.@{picker-prefix-cls}-cell-range-hover-end:not(.@{picker-prefix-cls}-cell-range-end):not(.@{picker-prefix-cls}-cell-in-range) {
+                .@{picker-prefix-cls}-cell-inner {
+                    border-radius: 0 @R2 @R2 0;
+                }
+
+                &:first-child, &.@{picker-prefix-cls}-cell-selected {
+                    .@{picker-prefix-cls}-cell-inner {
+                        border-radius: @R2;
+                    }
+                }
+            }
+
+            td.@{picker-prefix-cls}-cell-range-hover-start:not(.@{picker-prefix-cls}-cell-selected):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-in-range) {
+                .@{picker-prefix-cls}-cell-inner {
+                    border-radius: @R2 0 0 @R2;
+                }
+
+                &:last-child, &.@{picker-prefix-cls}-cell-selected {
+                    .@{picker-prefix-cls}-cell-inner {
+                        border-radius: @R2;
+                    }
+                }
             }
         }
     }

package/es/dropdown/dropdown.js

@@ -111,12 +111,11 @@ var Dropdown = function Dropdown(props) {
     return fixedModeOverlay;
   };
 
-  return /*#__PURE__*/React.createElement(RcDropdown, _extends({
+  return /*#__PURE__*/React.createElement(RcDropdown, _extends({}, rest, {
     prefixCls: prefixCls,
     trigger: triggerActions,
     onVisibleChange: onVisibleChange,
-    visible: mergedVisible
-  }, rest, {
+    visible: mergedVisible,
     overlay: function overlay() {
       return renderOverlay();
     },

package/es/dropdown/rc-dropdown/Dropdown.js

@@ -74,6 +74,7 @@ function Dropdown(props, ref) {
     var onOverlayClick = props.onOverlayClick;
     var overlayProps = getOverlayElement().props;
     setTriggerVisible(false);
+    onVisibleChange(false);
 
     if (onOverlayClick) {
       onOverlayClick(e);

package/es/form/style/horizontal.less

@@ -9,6 +9,8 @@
     .@{form-item-prefix-cls}-label {
         flex-grow: 0;
         line-height: @form-line-height-base;
+        padding-left: ~"calc(.5em + @{P})";
+        box-sizing: content-box;
 
         &:not([class*=~"' @{acud-prefix}-col-'"]) {
             margin-right: 4 * @P;
@@ -17,7 +19,7 @@
         > label {
             &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
                 text-indent: -.5em;
-                margin-left: -4px;
+                margin-left: -@P;
             }
         }
     }

package/es/form/style/index.css

@@ -111,6 +111,8 @@
 .acud-form-horizontal .acud-form-item-label {
   flex-grow: 0;
   line-height: 1.6667;
+  padding-left: calc(.5em + 4px);
+  box-sizing: content-box;
 }
 .acud-form-horizontal .acud-form-item-label:not([class*=' acud-col-']) {
   margin-right: 16px;

package/es/index.d.ts

@@ -7,6 +7,7 @@ export { default as Button } from './button';
 export { default as Carousel } from './carousel';
 export { default as Cascader } from './cascader';
 export { default as Checkbox } from './checkbox';
+export { default as Clear } from './clear';
 export { default as Col } from './col';
 export { default as Collapse } from './collapse';
 export { default as ConfigProvider } from './config-provider';

package/es/index.js

@@ -11,6 +11,7 @@ export { default as Button } from './button';
 export { default as Carousel } from './carousel';
 export { default as Cascader } from './cascader';
 export { default as Checkbox } from './checkbox';
+export { default as Clear } from './clear';
 export { default as Col } from './col';
 export { default as Collapse } from './collapse';
 export { default as ConfigProvider } from './config-provider';

package/es/input-number/src/hooks/useLayoutEffect.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const useLayoutEffect: typeof React.useEffect;
+export declare const useLayoutEffect: typeof React.useLayoutEffect;

package/es/locale/en_US.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 // import {Locale} from '../locale-provider';
+import DatePicker from '../date-picker/locale/en_US';
 var typeTemplate = '${label} is not a valid ${type}'; // const localeValues: Locale = {
 
 var localeValues = {
@@ -7,6 +8,7 @@ var localeValues = {
   global: {
     placeholder: 'Please select'
   },
+  DatePicker: DatePicker,
   Table: {
     filterTitle: 'Filter menu',
     filterConfirm: 'OK',

package/es/locale/zh_CN.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 // import {Locale} from '../locale-provider';
+import DatePicker from '../date-picker/locale/zh_CN';
 var typeTemplate = '${label}不是一个有效的${type}'; // const localeValues: Locale = {
 
 var localeValues = {
@@ -8,6 +9,7 @@ var localeValues = {
   global: {
     placeholder: '请选择'
   },
+  DatePicker: DatePicker,
   Table: {
     filterTitle: '筛选',
     filterConfirm: '确定',

package/es/menu/menu.d.ts

@@ -8,8 +8,9 @@ import { MenuItemInterface } from './MenuItem';
 import { SubMenuInterface } from './SubMenu';
 import { MenuHeadInterface } from './MenuHead';
 import { HeaderMenuProps } from './header';
+import { GlobalSiderBarProps } from './globalSilderBar';
 import { BaseMenuProps } from './baseMenu';
-export interface MenuProps extends RcMenuProps, HeaderMenuProps, BaseMenuProps {
+export interface MenuProps extends RcMenuProps, HeaderMenuProps, BaseMenuProps, GlobalSiderBarProps {
     iconList?: React.ReactNode[];
     scope?: 'global' | 'local';
     mode?: 'inline' | 'horizontal' | 'inline';

package/es/modal/DialogBox.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface ModalFuncProps {
     /** 对话框标题 */
-    title?: string;
+    title?: React.ReactNode;
     /** 对话框内容 */
     content?: React.ReactNode;
     /** 点击确定回调 */

package/es/progress/CircleProgress.js

@@ -75,7 +75,7 @@ var CircleProgress = function CircleProgress(_ref) {
     className: labelClassNames,
     style: labelStyles
   }, labelText);
-  var iconWidth = sizeRatioMap[size] * 10; // 若信息类型为图标，在成功和异常时，显示图标
+  var iconWidth = sizeRatioMap[size] * 12; // 若信息类型为图标，在成功和异常时，显示图标
 
   if (infoType === 'icon') {
     if (status === 'success') {
@@ -112,7 +112,7 @@ var CircleProgress = function CircleProgress(_ref) {
   }, /*#__PURE__*/React.createElement("path", {
     d: circlePath,
     stroke: strokeColor || 'currentColor',
-    strokeWidth: strokeWidth,
+    strokeWidth: percent ? strokeWidth : 0,
     strokeLinecap: strokeLinecap,
     fill: "none",
     style: progressStyles

package/es/progress/LineProgress.js

@@ -70,12 +70,14 @@ var LineProgress = function LineProgress(_ref) {
     if (status === 'success') {
       ProgressLabel = /*#__PURE__*/React.createElement(MultiToneSuccess, {
         className: labelClassNames,
-        color: strokeColor
+        color: strokeColor,
+        width: "16px"
       });
     } else if (status === 'error') {
       ProgressLabel = /*#__PURE__*/React.createElement(MultiToneError, {
         className: labelClassNames,
-        color: strokeColor
+        color: strokeColor,
+        width: "16px"
       });
     }
   }

package/es/radio/Radio.d.ts

@@ -7,6 +7,7 @@ export interface RadioProps {
     disabled?: boolean | undefined;
     children?: React.ReactNode;
     label?: string;
+    className?: string;
     onChange?: (e: Event) => {} | void;
     value?: any;
 }

package/es/radio/Radio.js

@@ -26,9 +26,10 @@ var InternalRadio = function InternalRadio(props, ref) {
   var _props$prefixCls = props.prefixCls,
       prefixCls = _props$prefixCls === void 0 ? 'acud-radio' : _props$prefixCls,
       children = props.children,
+      className = props.className,
       onChange = props.onChange,
       label = props.label,
-      restProps = __rest(props, ["prefixCls", "children", "onChange", "label"]);
+      restProps = __rest(props, ["prefixCls", "children", "className", "onChange", "label"]);
 
   var radioRef = /*#__PURE__*/React.createRef();
   React.useImperativeHandle(ref, function () {
@@ -43,7 +44,7 @@ var InternalRadio = function InternalRadio(props, ref) {
     radioProps.disabled = props.disabled || (context === null || context === void 0 ? void 0 : context.disabled);
   }
 
-  var classes = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), radioProps.disabled), _defineProperty(_classNames, "".concat(prefixCls, "-checked"), radioProps.checked), _classNames));
+  var classes = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), radioProps.disabled), _defineProperty(_classNames, "".concat(prefixCls, "-checked"), radioProps.checked), _classNames), className);
   var handleClick = useCallback(function (e) {
     var _a;
 

package/es/radio/RadioButton.js

@@ -24,9 +24,10 @@ export default (function (props) {
   var _props$prefixCls = props.prefixCls,
       prefixCls = _props$prefixCls === void 0 ? 'acud-radio-button' : _props$prefixCls,
       children = props.children,
+      className = props.className,
       onChange = props.onChange,
       label = props.label,
-      restProps = __rest(props, ["prefixCls", "children", "onChange", "label"]);
+      restProps = __rest(props, ["prefixCls", "children", "className", "onChange", "label"]);
 
   var context = useContext(RadioGroupContext);
 
@@ -37,7 +38,7 @@ export default (function (props) {
     radioProps.disabled = props.disabled || (context === null || context === void 0 ? void 0 : context.disabled);
   }
 
-  var classes = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), radioProps.disabled), _defineProperty(_classNames, "".concat(prefixCls, "-checked"), radioProps.checked), _classNames));
+  var classes = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), radioProps.disabled), _defineProperty(_classNames, "".concat(prefixCls, "-checked"), radioProps.checked), _classNames), className);
   var handleClick = useCallback(function (e) {
     var _a;
 

package/es/radio/RadioGroup.d.ts

@@ -8,6 +8,7 @@ export interface BaseRadioGourpProps {
     optionType?: string;
     options?: RadioProps[];
     children?: React.ReactNode;
+    className?: string;
     onChange?: (e: Event) => {} | void;
 }
 declare const _default: (props: BaseRadioGourpProps) => JSX.Element;

package/es/radio/RadioGroup.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { Fragment, useCallback } from 'react';
+import classnames from 'classnames';
 import useMergedState from '../_util/hooks/useMergedState';
 import Radio from './Radio';
 import Context from './context';
@@ -12,6 +13,7 @@ export default (function (props) {
       optionType = _props$optionType === void 0 ? 'default' : _props$optionType,
       options = props.options,
       children = props.children,
+      className = props.className,
       onChange = props.onChange;
 
   var _useMergedState = useMergedState(props.defaultValue, {
@@ -35,8 +37,9 @@ export default (function (props) {
     }
   }, [value, disabled, onChange]);
   var Compo = optionType === 'default' ? Radio : Radio.Button;
+  var classNames = classnames(prefixCls, className);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls
+    className: classNames
   }, /*#__PURE__*/React.createElement(Context.Provider, {
     value: {
       value: value,

package/es/radio/context.d.ts

@@ -4,6 +4,7 @@ export interface ContextProps {
     value: any;
     disabled?: boolean;
     name?: string;
+    className?: string;
 }
 declare const RadioGroupContext: import("react").Context<ContextProps>;
 export default RadioGroupContext;

package/es/style/themes/default/components/cascader.less

@@ -34,10 +34,6 @@
 @cascader-picker-font-size-md: @T2;
 @cascader-picker-font-size-lg: @T3;
 
-// clear
-@cascader-picker-clear-tp: tp9;
-@cascader-picker-clear-p: p9;
-
 // 级联menus cascader-menus
 @cascader-menus-z-index: 1050;
 @cascader-menus-font-size: @T2;

package/es/style/themes/default/components/clear.less

@@ -0,0 +1,2 @@
+@clear-tp: tp9;
+@clear-p: p9;

package/es/style/themes/default/components/datePicker.less

@@ -22,6 +22,7 @@
 @date-picker-date-tp: tp31;
 @date-picker-date-p: p40;
 @date-picker-header-icon-tp: tp24;
+@date-picker-header-tp: tp3;
 
 @picker-panel-cell-height: 6*@P;
 @primary-color: @B2;

package/es/style/themes/default/components/index.less

@@ -43,3 +43,4 @@
 @import './rate.less';
 @import './timeline.less';
 @import './popconfirm.less';
+@import './clear.less';

package/es/switch/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { SwitchProps } from './interface';
-declare const Switch: FC<SwitchProps>;
+import { CompoundedComponent } from './interface';
+declare const Switch: CompoundedComponent;
 export default Switch;

package/es/switch/index.js

@@ -16,6 +16,7 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import React from 'react';
+import { OutlinedLoading } from 'acud-icon';
 import classNames from 'classnames';
 import useMergedState from '../_util/hooks/useMergedState';
 var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -27,12 +28,13 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       checked = _a.checked,
       defaultChecked = _a.defaultChecked,
       disabled = _a.disabled,
-      loadingIcon = _a.loadingIcon,
+      loading = _a.loading,
+      customLoadingIcon = _a.loadingIcon,
       checkedChildren = _a.checkedChildren,
       unCheckedChildren = _a.unCheckedChildren,
       onClick = _a.onClick,
       onChange = _a.onChange,
-      restProps = __rest(_a, ["prefixCls", "className", "checked", "defaultChecked", "disabled", "loadingIcon", "checkedChildren", "unCheckedChildren", "onClick", "onChange"]);
+      restProps = __rest(_a, ["prefixCls", "className", "checked", "defaultChecked", "disabled", "loading", "loadingIcon", "checkedChildren", "unCheckedChildren", "onClick", "onChange"]);
 
   var _useMergedState = useMergedState(false, {
     value: checked,
@@ -42,6 +44,11 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       innerChecked = _useMergedState2[0],
       setInnerChecked = _useMergedState2[1];
 
+  var loadingIcon = loading && (customLoadingIcon || /*#__PURE__*/React.createElement(OutlinedLoading, {
+    className: "".concat(prefixCls, "-loading-icon"),
+    animation: "spin"
+  }));
+
   function triggerChange(newChecked, event) {
     var mergedChecked = innerChecked;
 
@@ -59,7 +66,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onClick === null || onClick === void 0 ? void 0 : onClick(ret, e);
   }
 
-  var switchClassName = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-checked"), innerChecked), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
+  var switchClassName = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-checked"), innerChecked), _defineProperty(_classNames, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
   return /*#__PURE__*/React.createElement("button", _extends({}, restProps, {
     type: "button",
     role: "switch",
@@ -73,4 +80,5 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, innerChecked ? checkedChildren : unCheckedChildren));
 });
 Switch.displayName = 'Switch';
+Switch.__ACUD_SWITCH = true;
 export default Switch;

package/es/switch/interface.d.ts

@@ -5,6 +5,7 @@ export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLButtonElement
     className?: string;
     prefixCls?: string;
     disabled?: boolean;
+    loading?: boolean;
     checkedChildren?: React.ReactNode;
     unCheckedChildren?: React.ReactNode;
     onChange?: SwitchChangeEventHandler;
@@ -16,3 +17,6 @@ export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLButtonElement
     style?: React.CSSProperties;
     title?: string;
 }
+export interface CompoundedComponent extends React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLElement>> {
+    __ACUD_SWITCH: boolean;
+}

package/es/switch/style/index.css

@@ -148,6 +148,34 @@
 .acud-switch-checked[disabled]:after {
   background-color: #FFFFFF;
 }
+.acud-switch-checked[disabled].acud-switch-loading .acud-switch-loading-icon {
+  color: #D4E5FF;
+}
+.acud-switch-checked.acud-switch-loading .acud-switch-loading-icon {
+  color: #2468F2;
+  left: initial;
+  right: 2px;
+}
+.acud-switch-loading {
+  cursor: no-drop;
+}
+.acud-switch-loading:after {
+  cursor: no-drop;
+  -webkit-animation-name: none;
+          animation-name: none;
+}
+.acud-switch-loading:hover:after {
+  width: 16px;
+  -webkit-animation-name: none;
+          animation-name: none;
+}
+.acud-switch-loading .acud-switch-loading-icon {
+  position: absolute;
+  top: 1px;
+  z-index: 99;
+  color: #D4D6D9;
+  left: 2px;
+}
 .acud-switch-disabled {
   cursor: no-drop;
 }
@@ -162,6 +190,9 @@
   -webkit-animation-name: none;
           animation-name: none;
 }
+.acud-switch-disabled .acud-switch-loading-icon {
+  color: #F2F2F4;
+}
 .acud-switch-label {
   display: inline-block;
   padding-left: 10px;