@ebscn/ui 0.0.10 → 1.0.0

package/cjs/components/button/button.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _ui = require("@ebscn/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _nativeProps = require("../../utils/native-props");
+var _validate = require("../../utils/validate");
+var _withDefaultProps = require("../../utils/with-default-props");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function () {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+var classPrefix = "ebscn-button";
+var defaultProps = {
+  color: 'primary',
+  fill: 'solid',
+  block: false,
+  loading: false,
+  disabled: false,
+  size: 'middle',
+  loadingIconPos: 'left'
+};
+var Button = exports.Button = (0, _react.forwardRef)(function (p, ref) {
+  var _a;
+  var _b, _c;
+  defaultProps.loadingIcon = _react.default.createElement(_ui.LoadingIcon, {
+    className: "".concat(classPrefix, "-loading-icon")
+  });
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var _d = (0, _react.useState)(false),
+    innerLoading = _d[0],
+    setInnerLoading = _d[1];
+  var nativeButtonRef = (0, _react.useRef)(null);
+  var loading = props.loading === 'auto' ? innerLoading : props.loading;
+  var disabled = props.disabled;
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      get nativeElement() {
+        return nativeButtonRef.current;
+      }
+    };
+  });
+  var handleClick = function (e) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var promise, e_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!props.onClick) return [2 /*return*/];
+            promise = props.onClick(e);
+            if (!(0, _validate.isPromise)(promise)) return [3 /*break*/, 4];
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 3,, 4]);
+            setInnerLoading(true);
+            return [4 /*yield*/, promise];
+          case 2:
+            _a.sent();
+            setInnerLoading(false);
+            return [3 /*break*/, 4];
+          case 3:
+            e_1 = _a.sent();
+            setInnerLoading(false);
+            throw e_1;
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var colorRecord = {
+    primary: 'var(--ebscn-color-primary,#e84225)',
+    sell: 'var(--ebscn-color-blue, #4c7cf1)',
+    financial: 'var(--ebscn-color-orange, #ff6800)'
+  };
+  var style = {
+    '--color': (_b = colorRecord[props.color || 'primary']) !== null && _b !== void 0 ? _b : props.color
+  };
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("button", {
+    style: style,
+    ref: nativeButtonRef,
+    type: props.type,
+    onClick: handleClick,
+    className: (0, _classnames.default)(classPrefix, (_a = {}, _a["".concat(classPrefix, "-").concat((_c = props.color) === null || _c === void 0 ? void 0 : _c.replace('#', ''))] = props.color, _a["".concat(classPrefix, "-block")] = props.block || props.size === 'large', _a["".concat(classPrefix, "-disabled")] = disabled, _a["".concat(classPrefix, "-fill-solid")] = props.fill === 'solid', _a["".concat(classPrefix, "-fill-outline")] = props.fill === 'outline', _a["".concat(classPrefix, "-fill-none-disabled")] = props.fill === 'none' && disabled, _a["".concat(classPrefix, "-fill-solid-disabled")] = props.fill === 'solid' && disabled, _a["".concat(classPrefix, "-fill-outline-disabled")] = props.fill === 'outline' && disabled, _a["".concat(classPrefix, "-fill-none")] = props.fill === 'none', _a["".concat(classPrefix, "-mini")] = props.size === 'mini', _a["".concat(classPrefix, "-small")] = props.size === 'small', _a["".concat(classPrefix, "-halfMiddle")] = props.size === 'halfMiddle', _a["".concat(classPrefix, "-middle")] = props.size === 'middle', _a["".concat(classPrefix, "-large")] = props.size === 'large', _a["".concat(classPrefix, "-loading")] = loading, _a["".concat(classPrefix, "-fill-none-loading")] = props.fill === 'none' && loading, _a["".concat(classPrefix, "-fill-solid-loading")] = props.fill === 'solid' && loading, _a["".concat(classPrefix, "-fill-outline-loading")] = props.fill === 'outline' && loading, _a)),
+    disabled: disabled,
+    onMouseDown: props.onMouseDown,
+    onMouseUp: props.onMouseUp,
+    onTouchStart: props.onTouchStart,
+    onTouchEnd: props.onTouchEnd
+  }, loading ? _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-loading-wrapper")
+  }, props.loadingIconPos === 'left' ? props.loadingIcon : null, _react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(classPrefix, "-text"), "".concat(classPrefix, "-loading-icon-").concat(props.loadingIconPos))
+  }, props.loadingText || props.children), props.loadingIconPos === 'right' ? props.loadingIcon : null) : _react.default.createElement("span", {
+    className: "".concat(classPrefix, "-text")
+  }, props.children)));
+});

package/cjs/components/button/index.d.ts

@@ -0,0 +1,4 @@
+import './button.less';
+import { Button } from './button';
+export type { ButtonProps, ButtonRef } from './button';
+export default Button;

package/cjs/components/button/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./button.css");
+var _button2 = require("./button");
+var _default = exports.default = _button2.Button;

package/cjs/components/card/card.css

@@ -0,0 +1,37 @@
+.ebscn-card {
+  background: var(--ebscn-color-background);
+}
+.ebscn-card-module {
+  border-radius: 16px;
+  padding: 16px;
+  margin: 0 0 12px 0;
+}
+.ebscn-card-line {
+  border-radius: 6px;
+  padding: 12px;
+  background-color: #f5f5f5;
+}
+.ebscn-card-line:not(:last-child) {
+  margin-bottom: 10px;
+}
+.ebscn-card-inline {
+  border-radius: 4px;
+  padding: 12px;
+  margin-top: 10px;
+  background-color: #f5f5f5;
+}
+.ebscn-card-inline:not(:last-child) {
+  margin-right: 10px;
+}
+.ebscn-card-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.ebscn-card-header-title {
+  font-size: var(--ebscn-font-size-7);
+  line-height: 1.4;
+  font-weight: bold;
+}

package/cjs/components/card/card.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type ICardProps = {
+    title?: ReactNode;
+    type?: 'module' | 'line' | 'inline';
+    extra?: ReactNode;
+    headerStyle?: CSSProperties;
+    headerClassName?: string;
+    bodyStyle?: CSSProperties;
+    bodyClassName?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps;
+export default function Card(props: ICardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/cjs/components/card/card.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Card;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _nativeProps = require("../../utils/native-props");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var classPrefix = "ebscn-card";
+function Card(props) {
+  var typeClassName = "".concat(classPrefix, "-").concat(props.type || 'module');
+  var renderHeader = function () {
+    if (!(props.title || props.extra)) {
+      return null;
+    }
+    return _react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(classPrefix, "-header"), "".concat(classPrefix, "-").concat(props.type, "-header"), props.headerClassName),
+      style: props.headerStyle,
+      onClick: props.onHeaderClick
+    }, _react.default.createElement("div", {
+      className: "".concat(classPrefix, "-header-title")
+    }, props.title), props.extra);
+  };
+  var renderBody = function () {
+    if (!props.children) {
+      return null;
+    }
+    return _react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(classPrefix, "-body"), "".concat(classPrefix, "-").concat(props.type, "-body"), props.bodyClassName),
+      style: props.bodyStyle,
+      onClick: props.onBodyClick
+    }, props.children);
+  };
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, typeClassName),
+    onClick: props.onClick
+  }, renderHeader(), renderBody()));
+}

package/cjs/components/card/index.d.ts

@@ -0,0 +1,4 @@
+import './card.less';
+import Card from './card';
+export type { ICardProps } from './card';
+export default Card;

package/cjs/components/card/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./card.css");
+var _card2 = _interopRequireDefault(require("./card"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = _card2.default;

package/cjs/components/checkbox/checkbox.css

@@ -0,0 +1,92 @@
+.ebscn-checkbox {
+  --icon-size: 24px;
+  --font-size: var(--ebscn-font-size-8);
+  --gap: 12px;
+  display: inline-flex;
+  vertical-align: text-bottom;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+.ebscn-checkbox input {
+  display: none;
+}
+.ebscn-checkbox.ebscn-checkbox-small {
+  --icon-size: 16px;
+  --font-size: var(--ebscn-font-size-4);
+  --gap: 9px;
+}
+.ebscn-checkbox .ebscn-checkbox-icon {
+  flex: none;
+  border-radius: var(--icon-size);
+  border: 1px solid var(--ebscn-color-light);
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--ebscn-color-text-light-solid);
+}
+.ebscn-checkbox .ebscn-checkbox-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-checkbox div.ebscn-checkbox-icon.ebscn-checkbox-only-icon {
+  color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-background);
+}
+.ebscn-checkbox.ebscn-checkbox-block {
+  display: flex;
+}
+.ebscn-checkbox.ebscn-checkbox-checked .ebscn-checkbox-icon {
+  border-color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-checkbox.ebscn-checkbox-disabled {
+  cursor: not-allowed;
+}
+.ebscn-checkbox.ebscn-checkbox-disabled .ebscn-checkbox-content {
+  opacity: 0.4;
+}
+.ebscn-checkbox.ebscn-checkbox-disabled .ebscn-checkbox-icon {
+  background-color: #e4e4e4;
+  border-color: #d9d9d9;
+  opacity: 0.4;
+}
+.ebscn-checkbox.ebscn-checkbox-disabled.ebscn-checkbox-checked .ebscn-checkbox-icon {
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-checkbox .ebscn-checkbox-custom-icon {
+  font-size: var(--icon-size);
+}
+.ebscn-checkbox.ebscn-checkbox-indeterminate .ebscn-checkbox-icon {
+  background-color: var(--ebscn-color-background);
+  color: var(--ebscn-color-primary);
+}
+.ebscn-checkbox-content {
+  flex: 0 1 auto;
+  font-size: var(--font-size);
+  padding-left: var(--gap);
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-content {
+  padding-left: 0;
+  height: 100%;
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon {
+  margin-right: 16px;
+  height: 100%;
+  border-color: transparent;
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon svg {
+  vertical-align: middle;
+}
+.ebscn-checkbox-icon-right {
+  width: 100%;
+  height: 100%;
+}

package/cjs/components/checkbox/checkbox.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type CheckboxValue = string | number;
+export type CheckboxProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: CheckboxValue;
+    indeterminate?: boolean;
+    block?: boolean;
+    id?: string;
+    icon?: (checked: boolean, indeterminate: boolean) => ReactNode;
+    children?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    size?: 'normal' | 'small';
+    iconRight?: boolean;
+} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
+export type CheckboxRef = {
+    check: () => void;
+    uncheck: () => void;
+    toggle: () => void;
+};
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => ReactNode) | undefined;
+    children?: ReactNode;
+    onClick?: ((event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void) | undefined;
+    size?: "small" | "normal" | undefined;
+    iconRight?: boolean | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--icon-size" | "--font-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CheckboxRef>>;
+export default Checkbox;

package/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ui = require("@ebscn/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _devLog = require("../../utils/dev-log");
+var _isDev = require("../../utils/is-dev");
+var _nativeProps = require("../../utils/native-props");
+var _usePropsValue = require("../../utils/use-props-value");
+var _withDefaultProps = require("../../utils/with-default-props");
+var _groupContext = require("./group-context");
+var _nativeInput = require("./native-input");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var classPrefix = "ebscn-checkbox";
+var defaultProps = {
+  defaultChecked: false,
+  indeterminate: false,
+  size: 'normal',
+  iconRight: false
+};
+var Checkbox = (0, _react.forwardRef)(function (p, ref) {
+  var _a;
+  var groupContext = (0, _react.useContext)(_groupContext.CheckboxGroupContext);
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var _b = (0, _usePropsValue.usePropsValue)({
+      value: props.checked,
+      defaultValue: props.defaultChecked,
+      onChange: props.onChange
+    }),
+    checked = _b[0],
+    setChecked = _b[1];
+  var disabled = props.disabled;
+  var value = props.value;
+  if (groupContext && value !== undefined) {
+    if (_isDev.isDev) {
+      if (p.checked !== undefined) {
+        (0, _devLog.devWarning)('Checkbox', 'When used within `Checkbox.Group`, the `checked` prop of `Checkbox` will not work.');
+      }
+      if (p.defaultChecked !== undefined) {
+        (0, _devLog.devWarning)('Checkbox', 'When used within `Checkbox.Group`, the `defaultChecked` prop of `Checkbox` will not work.');
+      }
+    }
+    checked = groupContext.value.includes(value);
+    setChecked = function (checked) {
+      var _a;
+      if (checked) {
+        groupContext.check(value);
+      } else {
+        groupContext.uncheck(value);
+      }
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+    };
+    disabled = disabled || groupContext.disabled;
+  }
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      check: function () {
+        setChecked(true);
+      },
+      uncheck: function () {
+        setChecked(false);
+      },
+      toggle: function () {
+        setChecked(!checked);
+      }
+    };
+  });
+  var renderIcon = function () {
+    if (props.icon) {
+      return _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-custom-icon")
+      }, props.icon(checked, props.indeterminate));
+    }
+    if (props.iconRight) {
+      return checked && _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-icon ").concat(classPrefix, "-only-icon")
+      }, _react.default.createElement(_ui.CheckOnlyIcon, null));
+    }
+    return _react.default.createElement("div", {
+      className: "".concat(classPrefix, "-icon")
+    }, props.indeterminate ? _react.default.createElement(_ui.IndeterminateIcon, null) : checked ? _react.default.createElement(_ui.CheckIcon, null) : _react.default.createElement(_ui.UncheckIcon, null));
+  };
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {
+    onClick: props.onClick,
+    className: (0, _classnames.default)(classPrefix, (_a = {}, _a["".concat(classPrefix, "-checked")] = checked && !props.indeterminate, _a["".concat(classPrefix, "-indeterminate")] = props.indeterminate, _a["".concat(classPrefix, "-disabled")] = disabled, _a["".concat(classPrefix, "-block")] = props.block, _a["".concat(classPrefix, "-small")] = props.size === 'small', _a["".concat(classPrefix, "-icon-right")] = props.iconRight, _a))
+  }, _react.default.createElement(_nativeInput.NativeInput, {
+    type: "checkbox",
+    checked: checked,
+    onChange: setChecked,
+    disabled: disabled,
+    id: props.id
+  }), props.iconRight ? _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-icon-right-input")
+  }, props.children && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children), renderIcon()) : _react.default.createElement(_react.default.Fragment, null, renderIcon(), props.children && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children))));
+});
+var _default = exports.default = Checkbox;

package/cjs/components/checkbox/group-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CheckboxValue } from '.';
+export declare const CheckboxGroupContext: import("react").Context<{
+    value: CheckboxValue[];
+    disabled: boolean;
+    check: (val: CheckboxValue) => void;
+    uncheck: (val: CheckboxValue) => void;
+} | null>;

package/cjs/components/checkbox/group-context.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroupContext = void 0;
+var _react = require("react");
+var CheckboxGroupContext = exports.CheckboxGroupContext = (0, _react.createContext)(null);

package/cjs/components/checkbox/group.d.ts

@@ -0,0 +1,10 @@
+import type { FC, ReactNode } from 'react';
+import { CheckboxValue } from '.';
+export interface CheckboxGroupProps {
+    value?: CheckboxValue[];
+    onChange?: (val: CheckboxValue[]) => void;
+    defaultValue?: CheckboxValue[];
+    disabled?: boolean;
+    children?: ReactNode;
+}
+export declare const Group: FC<CheckboxGroupProps>;

package/cjs/components/checkbox/group.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Group = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _withDefaultProps = require("../../utils/with-default-props");
+var _groupContext = require("./group-context");
+var _usePropsValue = require("../../utils/use-props-value");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var defaultProps = {
+  disabled: false,
+  defaultValue: []
+};
+var Group = function (p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var _a = (0, _usePropsValue.usePropsValue)(props),
+    value = _a[0],
+    setValue = _a[1];
+  return _react.default.createElement(_groupContext.CheckboxGroupContext.Provider
+  // TODO: 性能优化
+  , {
+    // TODO: 性能优化
+    value: {
+      value: value,
+      disabled: props.disabled,
+      check: function (v) {
+        setValue(__spreadArray(__spreadArray([], value, true), [v], false));
+      },
+      uncheck: function (v) {
+        setValue(value.filter(function (item) {
+          return item !== v;
+        }));
+      }
+    }
+  }, props.children);
+};
+exports.Group = Group;