@autobest-ui/components 2.11.3 → 2.13.0

package/esm/checkbox/Checkbox.d.ts

@@ -1,10 +1,14 @@
-import React, { MouseEvent } from 'react';
+import React, { ReactChild } from 'react';
 export interface CheckboxProps {
-    children?: React.ReactChild | React.ReactChild[];
+    children?: ReactChild | ReactChild[];
+    /**
+     * 勾选框尺寸，单位px
+     */
+    size?: number;
     /**
      * checked变化的回调函数, 参数 checked: boolean
      */
-    onChange: (checked: boolean, name?: string | number) => void;
+    onChange?: (checked: boolean, name?: string | number) => void;
     /**
      * 是否选中
      */
@@ -18,18 +22,10 @@ export interface CheckboxProps {
      */
     className?: string;
     name?: string | number;
-    /**
-     * 勾选框尺寸，单位px
-     */
-    size?: number;
     /**
      * 是否禁用
      */
     disabled?: boolean;
-    /**
-     * 掉转文字和勾选框位置
-     */
-    reverse?: boolean;
     /**
      * 主题样式
      * white为选中时白底红箭头
@@ -37,24 +33,5 @@ export interface CheckboxProps {
      */
     theme?: 'white' | 'blue';
 }
-interface CheckboxState {
-    visible: boolean;
-}
-declare class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
-    static defaultProps: {
-        size: number;
-        disabled: boolean;
-        defaultChecked: boolean;
-        reverse: boolean;
-        theme: string;
-    };
-    constructor(props: any);
-    static getDerivedStateFromProps(nextProps: CheckboxProps, prevState: CheckboxState): {
-        visible: boolean;
-    };
-    onVisibleChange: () => void;
-    renderBox: () => JSX.Element;
-    onClick: (e: MouseEvent<HTMLLabelElement>) => void;
-    render(): JSX.Element;
-}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/esm/checkbox/Checkbox.js

@@ -1,120 +1,58 @@
-var __extends = this && this.__extends || function () {
-  var _extendStatics = function extendStatics(d, b) {
-    _extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) {
-        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
-      }
-    };
-    return _extendStatics(d, b);
-  };
-  return function (d, b) {
-    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    _extendStatics(d, b);
-    function __() {
-      this.constructor = d;
-    }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  };
-}();
-import React from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import classNames from 'classnames';
+import { isUndef } from '@autobest-ui/utils';
 var cls = 'ab-checkbox';
-var Checkbox = /** @class */function (_super) {
-  __extends(Checkbox, _super);
-  function Checkbox(props) {
-    var _this = _super.call(this, props) || this;
-    _this.onVisibleChange = function () {
-      var _a = _this.props,
-        disabled = _a.disabled,
-        onChange = _a.onChange,
-        name = _a.name;
-      if (disabled) {
-        return;
-      }
-      var visible = !_this.state.visible;
-      if (!('checked' in _this.props)) {
-        _this.setState({
-          visible: visible
-        });
-      }
-      onChange(visible, name);
-    };
-    _this.renderBox = function () {
-      var _a;
-      var _b = _this.props,
-        className = _b.className,
-        disabled = _b.disabled,
-        size = _b.size,
-        theme = _b.theme;
-      var visible = _this.state.visible;
-      var innerStyle = {
-        width: "".concat(size, "px"),
-        height: "".concat(size, "px")
-      };
-      var iconStyle = {
-        width: "".concat(size * 6 / 16, "px"),
-        height: "".concat(size * 10 / 16, "px")
-      };
-      return /*#__PURE__*/React.createElement("span", {
-        className: classNames(cls, className, "".concat(cls, "-").concat(theme), (_a = {}, _a["".concat(cls, "-checked")] = visible, _a["".concat(cls, "-disabled")] = disabled, _a))
-      }, /*#__PURE__*/React.createElement("input", {
-        className: "".concat(cls, "-input"),
-        type: "checkbox",
-        onChange: _this.onVisibleChange
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(cls, "-inner"),
-        style: innerStyle
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(cls, "-icon"),
-        style: iconStyle
-      })));
-    };
-    _this.onClick = function (e) {
-      e.stopPropagation();
-    };
-    _this.state = {
-      visible: props.checked || props.defaultChecked
-    };
-    return _this;
-  }
-  Checkbox.getDerivedStateFromProps = function (nextProps, prevState) {
-    // 如果父级传了 checked 则更新 state
-    if ('checked' in nextProps && nextProps.checked !== prevState.visible) {
-      return {
-        visible: nextProps.checked
-      };
+var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var className = _a.className,
+    name = _a.name,
+    onChange = _a.onChange,
+    propsChecked = _a.checked,
+    defaultChecked = _a.defaultChecked,
+    disabled = _a.disabled,
+    children = _a.children,
+    theme = _a.theme,
+    size = _a.size;
+  var _c = useState(defaultChecked),
+    checked = _c[0],
+    setChecked = _c[1];
+  useEffect(function () {
+    if (!isUndef(propsChecked) && propsChecked !== checked) {
+      setChecked(propsChecked);
     }
-    return null;
-  };
-  Checkbox.prototype.render = function () {
-    var _a;
-    var _b = this.props,
-      className = _b.className,
-      disabled = _b.disabled,
-      children = _b.children,
-      reverse = _b.reverse;
-    // 只渲染复选框
-    if (!children) {
-      return this.renderBox();
+  }, [propsChecked, checked]);
+  var onCheckboxChange = function onCheckboxChange(e) {
+    setChecked(e.target.checked);
+    if (onChange) {
+      onChange(e.target.checked, name);
     }
-    return /*#__PURE__*/React.createElement("label", {
-      onClick: this.onClick,
-      className: classNames("".concat(cls, "-wrap"), className, (_a = {}, _a["".concat(cls, "-reverse")] = reverse, _a["".concat(cls, "-disabled")] = disabled, _a))
-    }, this.renderBox(), children ? /*#__PURE__*/React.createElement("span", {
-      className: "".concat(cls, "-content")
-    }, children) : null);
   };
-  Checkbox.defaultProps = {
-    size: 16,
-    disabled: false,
-    defaultChecked: false,
-    reverse: false,
-    theme: 'white'
+  var onWrapClick = function onWrapClick(e) {
+    e.stopPropagation();
   };
-  return Checkbox;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("label", {
+    className: classNames(cls, "".concat(cls, "-").concat(theme), (_b = {}, _b["".concat(cls, "-checked")] = checked, _b["".concat(cls, "-disabled")] = disabled, _b), className),
+    onClick: onWrapClick
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: ref,
+    className: "".concat(cls, "-input"),
+    type: "checkbox",
+    checked: checked,
+    disabled: disabled,
+    onChange: onCheckboxChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(cls, "-inner"),
+    style: {
+      width: size,
+      height: size
+    }
+  }), children);
+});
+Checkbox.defaultProps = {
+  disabled: false,
+  defaultChecked: false,
+  theme: 'blue',
+  size: 16
+};
+Checkbox.displayName = 'Checkbox';
 export default Checkbox;

package/esm/checkbox/CheckboxGroup.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { CheckboxProps } from './Checkbox';
-declare type CommonCheckboxProps = Partial<Pick<CheckboxProps, 'theme' | 'reverse' | 'disabled'>>;
+declare type CommonCheckboxProps = Partial<Pick<CheckboxProps, 'theme' | 'disabled' | 'size'>>;
 export interface CheckboxGroupOptionItem extends CommonCheckboxProps {
     name: string;
     value?: string | number;

package/esm/checkbox/CheckboxGroup.js

@@ -24,8 +24,8 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     options = _a.options,
     className = _a.className,
     disabled = _a.disabled,
-    reverse = _a.reverse,
-    theme = _a.theme;
+    theme = _a.theme,
+    size = _a.size;
   if (isEmptyArray(options)) {
     return null;
   }
@@ -46,8 +46,8 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     return /*#__PURE__*/React.createElement(Checkbox, {
       key: item.name,
       name: item.name,
-      reverse: getCheckboxProp(item.reverse, reverse),
       theme: getCheckboxProp(item.theme, theme),
+      size: getCheckboxProp(item.size, size),
       disabled: getCheckboxProp(item.disabled, disabled),
       checked: item.checked,
       onChange: onCheckboxChange

package/esm/checkbox/style/index.css

@@ -1 +1 @@
-.ab-checkbox{display:inline-block;position:relative;font-size:0;cursor:pointer}.ab-checkbox-input{position:absolute;opacity:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:2}.ab-checkbox-white .ab-checkbox-icon{border-color:#e84040}.ab-checkbox-blue .ab-checkbox-icon{border-color:#fff}.ab-checkbox-blue .ab-checkbox-inner{transition:none}.ab-checkbox-blue.ab-checkbox-checked .ab-checkbox-inner{border:.01rem solid #0075ff;background-color:#0075ff}.ab-checkbox-inner{display:inline-block;position:relative;width:.16rem;height:.16rem;transition:.3s;border:.02rem solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-icon{visibility:hidden;position:absolute;width:.06rem;height:.1rem;left:20%;top:40%;transform:rotate(45deg) scale(0) translate(-50%,-50%);transition:.2s;border:.02rem solid #e84040;border-top:none;border-left:none}.ab-checkbox.ab-checkbox-checked .ab-checkbox-icon{visibility:visible;transform:rotate(45deg) scale(1) translate(-50%,-50%)}.ab-checkbox.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-icon{border-color:#cecece}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none}.ab-checkbox-wrap{display:inline-block;position:relative;cursor:pointer}.ab-checkbox-wrap .ab-checkbox{position:absolute;transform:translateY(-50%);top:50%;left:0}.ab-checkbox-wrap:hover .ab-checkbox-content{text-decoration:underline}.ab-checkbox-wrap:hover .ab-checkbox-blue+.ab-checkbox-content{text-decoration:none}.ab-checkbox-content{padding-left:.24rem;display:inline-block}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox{left:auto;right:0}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox-content{padding-left:0;padding-right:.24rem}.ab-checkbox-wrap.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-wrap.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none}.ab-checkbox-group{display:flex;flex-wrap:wrap}.ab-checkbox-group .ab-checkbox-wrap{margin-right:.15rem}
+.ab-checkbox{cursor:pointer;display:inline-flex;align-items:center;user-select:none}.ab-checkbox-input{cursor:pointer;position:absolute;opacity:0;margin:0;padding:0;z-index:2}.ab-checkbox-inner{display:inline-block;margin-right:.06rem;position:relative;border:1px solid #b0b0b0;border-radius:.02rem;background-color:#fff;transition:.3s;flex-shrink:0}.ab-checkbox-inner::after{box-sizing:border-box;position:absolute;top:45%;left:22%;display:table;width:37.5%;height:62.5%;border-style:solid;border-width:2px;border-top:0;border-inline-start:0;transform:rotate(45deg) scale(0) translate(-50%,-50%);opacity:0;content:"";transition:.2s cubic-bezier(.71,-.46,.88,.6),opacity .1s}.ab-checkbox-checked .ab-checkbox-inner::after{opacity:1;transform:rotate(45deg) scale(1) translate(-50%,-50%);transition:.2s cubic-bezier(.12,.4,.29,1.46) .1s}.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-disabled .ab-checkbox-input{cursor:not-allowed}.ab-checkbox-white .ab-checkbox-inner::after{border-color:#e84040}.ab-checkbox-white.ab-checkbox-disabled .ab-checkbox-inner::after{border-color:#cecece}.ab-checkbox-blue .ab-checkbox-inner::after{border-color:#fff}.ab-checkbox-blue.ab-checkbox-checked .ab-checkbox-inner{transition:none;background-color:#0075ff;border-color:#0075ff}.ab-checkbox-blue.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-blue.ab-checkbox-disabled .ab-checkbox-inner::after{border-color:#cecece}.ab-checkbox-group{display:flex;flex-wrap:wrap}.ab-checkbox-group .ab-checkbox{margin-right:.08rem}

package/esm/input-phone/index.d.ts

@@ -45,7 +45,6 @@ interface InputPhonePropsWithRef extends InputPhoneProps {
 export declare class InputPhoneNotRef extends React.Component<InputPhonePropsWithRef, InputPhoneState> {
     prefixCls: string;
     inputRef: React.RefObject<HTMLInputElement>;
-    prevFormatValue: string;
     onFocusTimer: ReturnType<typeof setTimeout>;
     static defaultProps: {
         defaultValue: string;

package/esm/input-phone/index.js

@@ -76,6 +76,7 @@ var InputPhoneNotRef = /** @class */function (_super) {
     _this.onFocus = function (inputValue, name) {
       var _a = _this.props,
         onFocus = _a.onFocus,
+        onChange = _a.onChange,
         format = _a.format,
         placeholderChar = _a.placeholderChar;
       var formatValue = inputValue;
@@ -89,6 +90,9 @@ var InputPhoneNotRef = /** @class */function (_super) {
         }, function () {
           _this.resetCursorPositionOnFocus('', 50);
         });
+        if (onChange) {
+          onChange(formatValue, getNumberValue(formatValue), name);
+        }
         return;
       }
       _this.resetCursorPositionOnFocus(inputValue, 50);
@@ -102,11 +106,15 @@ var InputPhoneNotRef = /** @class */function (_super) {
       var _a = _this.props,
         format = _a.format,
         placeholderChar = _a.placeholderChar,
-        onBlur = _a.onBlur;
+        onBlur = _a.onBlur,
+        onChange = _a.onChange;
       if (formatValue === getPhoneFormat('', format, placeholderChar)) {
         _this.setState({
           formatValue: ''
         });
+        if (onChange) {
+          onChange('', '', name);
+        }
         if (onBlur) {
           onBlur('', '', name);
         }
@@ -124,16 +132,16 @@ var InputPhoneNotRef = /** @class */function (_super) {
         format = _a.format,
         onChange = _a.onChange,
         placeholderChar = _a.placeholderChar;
+      var prevFormatValue = _this.state.formatValue;
       var _b = getUpdatedValue({
           value: inputValue,
-          prevValue: _this.prevFormatValue,
+          prevValue: prevFormatValue,
           format: format,
           selectionEnd: _this.inputRef.current.selectionEnd,
           placeholder: placeholderChar
         }),
         formatValue = _b.value,
         cursorPosition = _b.cursorPosition;
-      _this.prevFormatValue = formatValue;
       _this.setState({
         formatValue: formatValue
       }, function () {
@@ -146,9 +154,8 @@ var InputPhoneNotRef = /** @class */function (_super) {
     var defaultValue = props.defaultValue,
       format = props.format,
       placeholderChar = props.placeholderChar;
-    _this.prevFormatValue = getPhoneFormat(defaultValue, format, placeholderChar);
     _this.state = {
-      formatValue: isBlank(defaultValue) ? '' : _this.prevFormatValue
+      formatValue: isBlank(defaultValue) ? '' : getPhoneFormat(defaultValue, format, placeholderChar)
     };
     return _this;
   }
@@ -157,8 +164,9 @@ var InputPhoneNotRef = /** @class */function (_super) {
       if (nextProps.value !== prevState.formatValue && (
       // 兼容外部传入空string/null的情况， 只有当一个值非空时，才会重新重置State信息
       !isBlank(nextProps.value) || !isBlank(prevState.formatValue))) {
+        var formatValue = isBlank(nextProps.value) ? '' : getPhoneFormat(nextProps.value, nextProps.format, nextProps.placeholderChar);
         return {
-          formatValue: getPhoneFormat(nextProps.value, nextProps.format, nextProps.placeholderChar)
+          formatValue: formatValue
         };
       }
     }

package/esm/radio/Radio.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { RadioProps } from './interface';
+import { RadioProps } from './type';
 declare const Radio: FC<RadioProps>;
 export default Radio;

package/esm/radio/Radio.js

@@ -19,6 +19,7 @@ var Radio = function Radio(props) {
   var _a;
   var _b = props.checked,
     propsChecked = _b === void 0 ? false : _b,
+    size = props.size,
     name = props.name,
     onChange = props.onChange,
     children = props.children,
@@ -45,36 +46,63 @@ var Radio = function Radio(props) {
       setChecked(groupContext.value === value);
     }
   }, [groupContext, value]);
-  var onRadioChange = function onRadioChange(e) {
+  var onRadioChange = function onRadioChange(ev) {
     if (mergedProps.disabled) {
       return;
     }
+    var checkedValue = ev.target.value;
     if (onChange) {
-      onChange(e, mergedProps.name);
+      onChange(checkedValue, mergedProps.name, ev.target.checked);
       return;
     }
     // radioGroup
     if (groupContext.onChange) {
-      groupContext.onChange(e.target.value, mergedProps.name);
+      groupContext.onChange(checkedValue, mergedProps.name);
       return;
     }
     setChecked(!checked);
   };
-  var onClick = function onClick(e) {
-    e.stopPropagation();
+  var onClick = function onClick(ev) {
+    ev.stopPropagation();
   };
   return /*#__PURE__*/React.createElement("label", {
     onClick: onClick,
     className: classNames(cls, (_a = {}, _a["".concat(cls, "-disabled")] = mergedProps.disabled, _a["".concat(cls, "-checked")] = checked, _a), groupContext.className, className)
   }, /*#__PURE__*/React.createElement("input", __assign({
+    style: {
+      width: size,
+      height: size
+    },
     type: "radio",
     checked: checked,
     value: value,
     onChange: onRadioChange
   }, mergedProps)), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(cls, "-control")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(cls, "-child")
-  }, children));
+    className: "".concat(cls, "-control"),
+    style: {
+      width: size,
+      height: size,
+      fontSize: size
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(cls, "-outer"),
+    focusable: "false",
+    "aria-hidden": "true",
+    viewBox: "0 0 512 512"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z",
+    strokeWidth: "1.5em",
+    fill: "#fff"
+  })), /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(cls, "-dot"),
+    focusable: "false",
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+  }))), children);
+};
+Radio.defaultProps = {
+  size: 16
 };
 export default Radio;

package/esm/radio/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { RadioGroupProps, RadioValue } from './interface';
+import { RadioGroupProps, RadioValue } from './type';
 interface RadioGroupState {
     value: RadioValue;
 }
@@ -8,7 +8,7 @@ declare class RadioGroup extends Component<RadioGroupProps, RadioGroupState> {
     static getDerivedStateFromProps(nextProps: RadioGroupProps, prevState: RadioGroupState): {
         value: RadioValue;
     };
-    onRadioChange: (v: RadioValue, n: string) => void;
+    onRadioChange: (value: RadioValue, name?: string) => void;
     renderRadioGroup: () => JSX.Element;
     renderRadioList: () => JSX.Element;
     render(): JSX.Element;

package/esm/radio/RadioGroup.js

@@ -32,14 +32,14 @@ var RadioGroup = /** @class */function (_super) {
   __extends(RadioGroup, _super);
   function RadioGroup(props) {
     var _this = _super.call(this, props) || this;
-    _this.onRadioChange = function (v, n) {
+    _this.onRadioChange = function (value, name) {
       var onChange = _this.props.onChange;
       if (onChange) {
-        onChange(v, n);
+        onChange(value, name);
         return;
       }
       _this.setState({
-        value: v
+        value: value
       });
     };
     _this.renderRadioGroup = function () {
@@ -62,7 +62,8 @@ var RadioGroup = /** @class */function (_super) {
       var _a = _this.props,
         name = _a.name,
         options = _a.options,
-        disabled = _a.disabled;
+        disabled = _a.disabled,
+        size = _a.size;
       var value = _this.state.value;
       if (isEmptyArray(options)) {
         return null;
@@ -72,12 +73,11 @@ var RadioGroup = /** @class */function (_super) {
           key: item.value,
           className: "".concat(cls, "-item"),
           name: name,
+          size: size,
           value: item.value,
           disabled: getRadioProp(item.disabled, disabled),
           checked: value === item.value,
-          onChange: function onChange(e, n) {
-            return _this.onRadioChange(e.target.value, n);
-          }
+          onChange: _this.onRadioChange
         }, item.name);
       }));
     };

package/esm/radio/context.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { RadioGroupProps } from './interface';
+import React from 'react';
+import { RadioGroupProps } from './type';
 declare const RadioGroupContext: React.Context<RadioGroupProps>;
 export declare const RadioGroupContextProvider: React.Provider<RadioGroupProps>;
 export default RadioGroupContext;

package/esm/radio/context.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 var RadioGroupContext = /*#__PURE__*/React.createContext({});
 export var RadioGroupContextProvider = RadioGroupContext.Provider;
 export default RadioGroupContext;

package/esm/radio/index.d.ts

@@ -1,3 +1,3 @@
-export type { RadioProps, RadioGroupProps, RadioValue, RadioOptionItem } from './interface';
+export type { RadioProps, RadioGroupProps, RadioValue, RadioOptionItem } from './type';
 export { default as Radio } from './Radio';
 export { default as RadioGroup } from './RadioGroup';

package/esm/radio/style/index.css

@@ -1 +1 @@
-.ab-radio{position:relative;overflow:hidden;display:inline-flex;align-items:center;cursor:pointer}.ab-radio input{width:1px;height:1px;margin:-1px;position:absolute}.ab-radio-checked .ab-radio-control{border-color:#0075ff}.ab-radio-checked .ab-radio-control::before{background-color:#0075ff}.ab-radio-checked .ab-radio-control:hover{border-color:#005cc8}.ab-radio-checked .ab-radio-control:hover::before{background-color:#005cc8}.ab-radio-disabled{cursor:not-allowed}.ab-radio-disabled .ab-radio-control{border-color:#d1d1d1;background-color:#f8f8f8}.ab-radio-disabled .ab-radio-control:hover{border-color:#d1d1d1}.ab-radio-disabled.ab-radio-checked .ab-radio-control::before{background-color:#d1d1d1}.ab-radio-control{width:.14rem;height:.14rem;border:1px solid #767676;border-radius:50%;margin-right:.06rem;position:relative;display:flex;align-items:center;justify-content:center}.ab-radio-control::before{content:"";width:.08rem;height:.08rem;border-radius:50%;background-color:transparent}.ab-radio-control:hover{border-color:#4f4f4f}.ab-radio-group-horizontal{display:flex}.ab-radio-group-horizontal .ab-radio-item{margin-right:.2rem}.ab-radio-group-horizontal .ab-radio-item:last-child{margin-right:0}.ab-radio-group-vertical{display:flex;flex-direction:column}.ab-radio-group-vertical .ab-radio-item{margin-bottom:.15rem}.ab-radio-group-vertical .ab-radio-item:last-child{margin-bottom:0}
+.ab-radio{position:relative;overflow:hidden;display:inline-flex;align-items:center;cursor:pointer;font-size:.14rem}.ab-radio:hover .ab-radio-control{color:#4f4f4f}.ab-radio input{cursor:inherit;position:absolute;margin:0;padding:0;opacity:0;top:0;left:0;z-index:1}.ab-radio-checked:hover .ab-radio-control{color:#005cc8}.ab-radio-checked .ab-radio-control{color:#0075ff}.ab-radio-checked .ab-radio-control svg{display:inline-block}.ab-radio-disabled{cursor:not-allowed}.ab-radio-disabled .ab-radio-control,.ab-radio-disabled:hover .ab-radio-control{color:#d1d1d1}.ab-radio-control{margin-right:.06rem;position:relative;color:#767676}.ab-radio-control svg{width:1em;height:1em;user-select:none;flex-shrink:0;fill:currentcolor;stroke:currentcolor}.ab-radio-dot,.ab-radio-outer{position:absolute;left:0;top:0}.ab-radio-dot{display:none}.ab-radio-group-horizontal{display:flex}.ab-radio-group-horizontal .ab-radio-item{margin-right:.2rem}.ab-radio-group-horizontal .ab-radio-item:last-child{margin-right:0}.ab-radio-group-vertical{display:flex;flex-direction:column}.ab-radio-group-vertical .ab-radio-item{margin-bottom:.15rem}.ab-radio-group-vertical .ab-radio-item:last-child{margin-bottom:0}

package/esm/radio/{interface.d.ts → type.d.ts}

@@ -1,15 +1,16 @@
-import { ChangeEvent } from 'react';
 export declare type RadioValue = string | number;
 export interface RadioProps {
     name?: string;
     checked?: boolean;
     disabled?: boolean;
     value?: RadioValue;
-    onChange?: (e: ChangeEvent<HTMLInputElement>, name: string) => void;
+    /**单位为px */
+    size?: number;
+    onChange?: (value: RadioValue, name?: string, checked?: boolean) => void;
     className?: string;
 }
 export declare type RadioOptionItem = Pick<RadioProps, 'disabled' | 'name' | 'value'>;
-export interface RadioGroupProps extends Pick<RadioProps, 'value' | 'name' | 'disabled' | 'className'> {
+export interface RadioGroupProps extends Pick<RadioProps, 'value' | 'name' | 'disabled' | 'className' | 'size'> {
     options?: RadioOptionItem[];
     defaultValue?: RadioValue;
     onChange?: (value: RadioValue, name: string) => void;