@sheinx/base 3.0.0-alpha.1

package/esm/carousel/carousel.js

@@ -0,0 +1,130 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.from.js");
+var _hooks = require("@sheinx/hooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _icons = _interopRequireDefault(require("../icons"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Carousel = function Carousel(props) {
+  var _props$jssStyle, _props$jssStyle$carou;
+  var _props$animation = props.animation,
+    animation = _props$animation === void 0 ? 'slide' : _props$animation,
+    _props$indicatorPosit = props.indicatorPosition,
+    indicatorPosition = _props$indicatorPosit === void 0 ? 'center' : _props$indicatorPosit,
+    _props$indicatorType = props.indicatorType,
+    indicatorType = _props$indicatorType === void 0 ? 'circle' : _props$indicatorType;
+  var total = _react.default.Children.toArray(props.children).length;
+  var carouselClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$carou = _props$jssStyle.carousel) === null || _props$jssStyle$carou === void 0 ? void 0 : _props$jssStyle$carou.call(_props$jssStyle);
+  var _useCarousel = (0, _hooks.useCarousel)({
+      total: total,
+      interval: props.interval,
+      onMove: props.onMove
+    }),
+    current = _useCarousel.current,
+    pre = _useCarousel.pre,
+    direction = _useCarousel.direction,
+    func = _useCarousel.func;
+  var wrapperClasses = (0, _classnames.default)(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.wrapper, props.className, animation === 'slide' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationSlide), animation === 'fade' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationFade), animation === 'slide-y' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationSlideY), direction === 'forward' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionForward), direction === 'backward' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionBackward), direction === 'stop' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionStop));
+  var renderItems = function renderItems() {
+    var _props$style;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.slider,
+      style: {
+        height: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.height
+      },
+      children: _react.default.Children.map(props.children, function (child, index) {
+        var itemClasses = (0, _classnames.default)(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.item, index === current && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.itemCurrent), index === pre && pre !== current && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.itemPre));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: itemClasses,
+          children: child
+        });
+      })
+    });
+  };
+  var renderArrow = function renderArrow() {
+    if (!props.showArrow) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(props.showArrow === 'hover' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.arrowHover), carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.arrowWrapper, props.arrowClassName),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.arrowLeft, carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.arrowItem),
+        onClick: func.backward,
+        children: _icons.default.ArrowLeft
+      }, 'left'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.arrowRight, carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.arrowItem),
+        onClick: func.forward,
+        children: _icons.default.ArrowRight
+      }, 'right')]
+    });
+  };
+  var renderIndicator = function renderIndicator() {
+    if (total <= 1) return null;
+    var content = null;
+    if (typeof indicatorType === 'function') {
+      content = indicatorType(current, func.moveTo);
+    } else if (indicatorType === 'number') {
+      content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorArrow,
+          onClick: func.backward,
+          children: _icons.default.ArrowLeft
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorNumber,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: current
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "/"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: total
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorArrow,
+          onClick: func.forward,
+          children: _icons.default.ArrowRight
+        })]
+      });
+    } else {
+      content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: Array.from({
+          length: total
+        }).map(function (_, index) {
+          var indicatorClasses = (0, _classnames.default)(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicator, index === current && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorActive));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: indicatorClasses,
+            onClick: function onClick() {
+              return func.moveTo(index);
+            }
+          }, index);
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorWrapper, indicatorPosition === 'center' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorCenter), indicatorPosition === 'left' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorLeft), indicatorPosition === 'right' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorRight), indicatorPosition === 'outer' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorOuter), indicatorType === 'circle' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorTypeCircle), indicatorType === 'number' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorTypeNumber), indicatorType === 'line' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorTypeLine), indicatorType === 'slider' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.indicatorTypeSlider)),
+      children: content
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: wrapperClasses,
+    style: _objectSpread(_objectSpread({}, props.style), {}, {
+      height: 'auto'
+    }),
+    onMouseEnter: func.stop,
+    onMouseLeave: func.start,
+    children: [renderItems(), renderIndicator(), renderArrow()]
+  });
+};
+var _default = Carousel;
+exports.default = _default;

package/esm/carousel/carousel.type.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { CommonType } from '../common/type';
+export interface CarouselClasses {
+    wrapper?: string;
+    animationSlide?: string;
+    animationFade?: string;
+    animationSlideY?: string;
+    directionForward?: string;
+    directionBackward?: string;
+    directionStop?: string;
+    slider?: string;
+    item?: string;
+    itemCurrent?: string;
+    itemPre?: string;
+    arrowWrapper?: string;
+    arrowHover?: string;
+    arrowItem?: string;
+    arrowLeft?: string;
+    arrowRight?: string;
+    indicatorWrapper?: string;
+    indicatorCenter?: string;
+    indicatorLeft?: string;
+    indicatorRight?: string;
+    indicatorOuter?: string;
+    indicatorTypeCircle?: string;
+    indicatorTypeNumber?: string;
+    indicatorTypeLine?: string;
+    indicatorTypeSlider?: string;
+    indicatorArrow?: string;
+    indicatorNumber?: string;
+    indicator?: string;
+    indicatorActive?: string;
+    indicatorDot?: string;
+}
+/**
+ * @title Carousel
+ */
+export interface CarouselProps extends Pick<CommonType, 'className' | 'style'> {
+    jssStyle?: {
+        carousel: () => CarouselClasses;
+    };
+    /**
+     * @en animation effects, options: \nslide - horizontal sliding\nslide-y - vertical sliding\nfade - fading
+     * @cn 动画效果，可选值为 slide - 横向滑动 ，slide-y - 垂直滑动 ，fade - 淡入淡出
+     * @default 'slide'
+     */
+    animation?: 'slide' | 'slide-y' | 'fade';
+    /**
+     * @en the position of indicator
+     * @cn 指示标示位置
+     * @default 'center'
+     */
+    indicatorPosition?: 'left' | 'center' | 'right' | 'outer';
+    /**
+     * @en the style of indicator, using function for custom styles
+     * @cn 指示标示样式, 函数则可以自定义样式: (current, moveTo) => (<Component />)
+     * @default 'circle'
+     */
+    indicatorType?: ((current: number, moveTo: (index: number) => void) => React.ReactNode) | 'circle' | 'number' | 'line' | 'slider';
+    /**
+     * @en the interval of animation, When it is not 0, play automatically
+     * @cn 动画间隔时间，为 0 时，不自动播放
+     * @default 0
+     */
+    interval?: number;
+    /**
+     * @en move callback
+     * @cn 轮播后的回调
+     */
+    onMove?: (current: number, extra: {
+        prev: number;
+        direction: 'forward' | 'backward';
+        moveTo: (n: number) => void;
+    }) => void;
+    /**
+     * @en children
+     * @cn 子元素
+     *
+     */
+    children?: React.ReactNode;
+    /**
+     * @en When to show the switch trigger
+     * @cn 切换箭头显示时机
+     *
+     */
+    showArrow?: 'always' | 'hover';
+    /**
+     * @en The additional css class for arrow
+     * @cn 箭头扩展 class
+     */
+    arrowClassName?: string;
+}
+//# sourceMappingURL=carousel.type.d.ts.map

package/esm/carousel/carousel.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.type.d.ts","sourceRoot":"","sources":["carousel.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC5E,QAAQ,CAAC,EAAE;QACT,QAAQ,EAAE,MAAM,eAAe,CAAC;KACjC,CAAC;IAEF;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEzC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IAE1D;;;;OAIG;IACH,aAAa,CAAC,EACV,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC,GACvE,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,QAAQ,CAAC;IAEb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,CACP,OAAO,EAAE,MAAM,EACf,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;QAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,KACpF,IAAI,CAAC;IAEV;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/esm/carousel/carousel.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Carousel } from './carousel';
+export type { CarouselProps } from './carousel.type';
+//# sourceMappingURL=index.d.ts.map

package/esm/carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/esm/carousel/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function get() {
+    return _carousel.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _carousel.default;
+  }
+});
+var _carousel = _interopRequireDefault(require("./carousel"));

package/esm/checkbox/__example__/001-base.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=001-base.d.ts.map

package/esm/checkbox/__example__/001-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"001-base.d.ts","sourceRoot":"","sources":["001-base.tsx"],"names":[],"mappings":";;AAIA,wBAME"}

package/esm/checkbox/__example__/001-base.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      jssStyle: {
+        checkbox: _shineoutStyle.useCheckboxStyle
+      },
+      children: "yellow"
+    })
+  });
+};
+exports.default = _default;

package/esm/checkbox/__example__/002-disabled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=002-disabled.d.ts.map

package/esm/checkbox/__example__/002-disabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"002-disabled.d.ts","sourceRoot":"","sources":["002-disabled.tsx"],"names":[],"mappings":";;AAIA,wBAWE"}

package/esm/checkbox/__example__/002-disabled.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      jssStyle: {
+        checkbox: _shineoutStyle.useCheckboxStyle
+      },
+      disabled: true,
+      children: "red"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      jssStyle: {
+        checkbox: _shineoutStyle.useCheckboxStyle
+      },
+      disabled: true,
+      defaultChecked: true,
+      children: "green"
+    })]
+  });
+};
+exports.default = _default;

package/esm/checkbox/checkbox-group.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CheckboxGroupProps } from './checkbox-group.type';
+declare const Group: {
+    <DataItem, Value extends any[]>(props: CheckboxGroupProps<DataItem, Value>): JSX.Element;
+    defaultProps: {
+        format: (d: any) => any;
+        renderItem: (d: any) => any;
+    };
+};
+export default Group;
+//# sourceMappingURL=checkbox-group.d.ts.map

package/esm/checkbox/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["checkbox-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQ3D,QAAA,MAAM,KAAK;;;oBAyFG,GAAG;wBACC,GAAG;;CAHpB,CAAC;AAMF,eAAe,KAAK,CAAC"}

package/esm/checkbox/checkbox-group.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _hooks = require("@sheinx/hooks");
+var _groupContext = _interopRequireDefault(require("./group-context"));
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useWithFormConfig2 = _interopRequireDefault(require("../common/use-with-form-config"));
+var _jsxRuntime = require("react/jsx-runtime");
+var Group = function Group(props) {
+  var _jssStyle$checkbox;
+  var children = props.children,
+    className = props.className,
+    block = props.block,
+    keygen = props.keygen,
+    jssStyle = props.jssStyle,
+    style = props.style;
+  var checkboxStyle = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$checkbox = jssStyle.checkbox) === null || _jssStyle$checkbox === void 0 ? void 0 : _jssStyle$checkbox.call(jssStyle);
+  var _useWithFormConfig = (0, _useWithFormConfig2.default)(props),
+    disabled = _useWithFormConfig.disabled;
+  var inputAbleProps = (0, _hooks.useInputAble)({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: props.onChange,
+    control: 'value' in props,
+    beforeChange: props.beforeChange
+  });
+  var useListParams = {
+    value: inputAbleProps.value,
+    onChange: inputAbleProps.onChange,
+    prediction: props.prediction,
+    separator: props.separator,
+    disabled: disabled,
+    format: props.format,
+    keygen: props.keygen,
+    data: props.data || []
+  };
+  var datum = (0, _hooks.useListSelectMultiple)(useListParams);
+  var handleItemChange = (0, _hooks.usePersistFn)(function (_, checked, raw) {
+    if (checked) {
+      datum.add(raw);
+    } else {
+      datum.remove(raw);
+    }
+  });
+  var isChecked = (0, _hooks.usePersistFn)(function (d) {
+    return datum.check(d);
+  });
+  var getContent = function getContent(d, index) {
+    var renderItem = props.renderItem;
+    if (typeof renderItem === 'string') {
+      return d[renderItem];
+    }
+    if (typeof renderItem === 'function') {
+      return renderItem(d, index);
+    }
+    return '';
+  };
+  var providerValue = {
+    checked: isChecked,
+    onChange: handleItemChange,
+    disabled: disabled
+  };
+  var groupClass = (0, _classnames.default)(className, checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.group, !!block && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.groupBlock));
+  if (props.data === undefined) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: groupClass,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupContext.default.Provider, {
+        value: providerValue,
+        children: children
+      })
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: groupClass,
+      style: style,
+      children: [props.data.map(function (d, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
+          jssStyle: jssStyle,
+          checked: datum.check(d),
+          disabled: datum.disabledCheck(d),
+          htmlValue: d,
+          onChange: handleItemChange,
+          children: getContent(d, i)
+        }, _hooks.util.getKey(keygen, d, i));
+      }), children]
+    });
+  }
+};
+Group.defaultProps = {
+  format: function format(d) {
+    return d;
+  },
+  renderItem: function renderItem(d) {
+    return d;
+  }
+};
+var _default = Group;
+exports.default = _default;

package/esm/checkbox/checkbox-group.type.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { KeygenType, ObjectKey } from '@sheinx/hooks';
+import { CommonType } from '../common/type';
+import { CheckboxStyle } from './checkbox.type';
+export interface CheckboxGroupProps<DataItem, Value extends any[] | string> extends Pick<CommonType, 'className' | 'size' | 'style'> {
+    jssStyle: CheckboxStyle;
+    /**
+     * @en You can pass in a set of Checkbox
+     * @cn 可以传入一组Checkbox
+     */
+    children?: ReactNode;
+    /**
+     * @en When it is a string, return d\\[string]. When it is a function, return the result of the function.
+     * @cn 为 string 时，返回 d\\[string]。 为 function 时，返回函数结果
+     * @default  d => d
+     */
+    renderItem?: ObjectKey<DataItem> | ((data: DataItem, index?: number) => ReactNode);
+    prediction?: (value: Value[number], data: DataItem) => boolean;
+    format?: ObjectKey<DataItem> | ((data: DataItem) => Value[number]);
+    separator?: string;
+    keygen: KeygenType<DataItem>;
+    /**
+     * @en The default is horizontal layout and setting the block property can changed it to be vertical layout.
+     * @cn 默认为水平布局，设置 block 属性可以改为垂直布局
+     */
+    block?: boolean;
+    /**
+     * @en the data items
+     * @cn 数据项
+     * @override any[]
+     */
+    data?: DataItem[];
+    /**
+     * @en The callback function for changing value
+     * @cn 值改变回调函数
+     */
+    onChange?: (value: Value) => void;
+    /**
+     * @en In the Form, value is taken over by the Form and the value will be invalid.
+     * @cn 在 Form中，value 会被表单接管，value 无效
+     * @override any
+     */
+    value?: Value;
+    defaultValue?: Value;
+    beforeChange?: (value: Value) => Value | undefined;
+    disabled?: boolean | ((data: DataItem) => boolean);
+}
+//# sourceMappingURL=checkbox-group.type.d.ts.map

package/esm/checkbox/checkbox-group.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.type.d.ts","sourceRoot":"","sources":["checkbox-group.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,kBAAkB,CAAC,QAAQ,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,MAAM,CACxE,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACxD,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC;IACnF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,GAAG,SAAS,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC;CACpD"}

package/esm/checkbox/checkbox-group.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/checkbox/checkbox.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CheckboxProps } from './checkbox.type';
+declare const CheckboxWithContext: <T>(props: CheckboxProps<T>) => JSX.Element;
+export default CheckboxWithContext;
+//# sourceMappingURL=checkbox.d.ts.map

package/esm/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["checkbox.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAqFhD,QAAA,MAAM,mBAAmB,6CAIxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/esm/checkbox/checkbox.js

@@ -0,0 +1,105 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _simpleCheckbox = _interopRequireDefault(require("./simple-checkbox"));
+var _hooks = require("@sheinx/hooks");
+var _groupContext = _interopRequireDefault(require("./group-context"));
+var _useCheckboxInputable2 = _interopRequireDefault(require("./use-checkbox-inputable"));
+var _input = _interopRequireDefault(require("../input"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "htmlValue", "onChange", "jssStyle", "value", "defaultValue", "inputable"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Checkbox = function Checkbox(props) {
+  var _jssStyle$checkbox;
+  var children = props.children,
+    _props$htmlValue = props.htmlValue,
+    htmlValue = _props$htmlValue === void 0 ? true : _props$htmlValue,
+    onChangePo = props.onChange,
+    jssStyle = props.jssStyle,
+    valuePo = props.value,
+    defaultValuePo = props.defaultValue,
+    inputable = props.inputable,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var checkboxStyle = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$checkbox = jssStyle.checkbox) === null || _jssStyle$checkbox === void 0 ? void 0 : _jssStyle$checkbox.call(jssStyle);
+  var _useInputAble = (0, _hooks.useInputAble)({
+      value: valuePo,
+      defaultValue: defaultValuePo,
+      onChange: onChangePo,
+      control: 'value' in props,
+      beforeChange: props.beforeChange
+    }),
+    onChange = _useInputAble.onChange,
+    value = _useInputAble.value;
+
+  // 兼容历史版本的inputable
+  var _useCheckboxInputable = (0, _useCheckboxInputable2.default)({
+      value: value,
+      onChange: onChange,
+      checked: props.checked,
+      inputable: props.inputable
+    }),
+    checked = _useCheckboxInputable.checked,
+    onInputableCheckboxChange = _useCheckboxInputable.onInputableCheckboxChange,
+    onInputChange = _useCheckboxInputable.onInputChange;
+  var handleChange = (0, _hooks.usePersistFn)(function (checked) {
+    if (inputable) {
+      // 兼容历史版本的inputable
+      onInputableCheckboxChange(checked);
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(checked ? htmlValue : undefined, checked, htmlValue);
+  });
+  var getChecked = function getChecked() {
+    if (typeof checked === 'function') {
+      return checked(htmlValue);
+    }
+    if (typeof checked !== 'undefined') return checked;
+    return value === htmlValue;
+  };
+  var handleInputClick = (0, _hooks.usePersistFn)(function (e) {
+    var _props$onClick;
+    e.stopPropagation();
+    props === null || props === void 0 ? void 0 : (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, e);
+  });
+  var inputValue = typeof value === 'string' ? value : '';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_simpleCheckbox.default, _objectSpread(_objectSpread({
+    jssStyle: jssStyle
+  }, rest), {}, {
+    checked: getChecked(),
+    onChange: handleChange,
+    renderFooter: function renderFooter(c) {
+      if (inputable && c) {
+        // 兼容历史版本的inputable
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
+          jssStyle: jssStyle,
+          className: checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.input,
+          value: inputValue,
+          onChange: onInputChange,
+          onClick: handleInputClick
+        });
+      }
+      return null;
+    },
+    children: children
+  }));
+};
+var CheckboxWithContext = function CheckboxWithContext(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupContext.default.Consumer, {
+    children: function children(value) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, _objectSpread(_objectSpread({}, props), value));
+    }
+  });
+};
+var _default = CheckboxWithContext;
+exports.default = _default;