shineout 0.0.1-alpha.1

package/cjs/carousel/__example__/03-animation.js

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * cn - 指示器
+ *    -- 轮播组件提供了三种动画过渡方式，可以切换选项查看效果
+ * en - Indicator
+ *    -- You can set indicator type and position.
+ */
+
+var images = ['https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-02.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-03.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-04.png'];
+var App = function App() {
+  var _useState = (0, _react.useState)('slide'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    animationType = _useState2[0],
+    setAnimation = _useState2[1];
+  var rowStyle = {
+    display: 'flex',
+    marginBottom: 16,
+    alignItems: 'center'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: rowStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 150
+        },
+        children: "animation type:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
+        keygen: true,
+        value: animationType,
+        data: ['slide', 'slide-y', 'fade'],
+        onChange: function onChange(v) {
+          return setAnimation(v);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Carousel, {
+      style: {
+        width: 600,
+        height: 280
+      },
+      interval: 3000,
+      animation: animationType,
+      children: images.map(function (src) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: src
+        }, src);
+      })
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/carousel/__example__/04-custom.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 自定义 Indicator
+ *    -- 当 indicatorType 为函数时，可以自定义 Indicator
+ * en - Custom Indicator
+ *    -- Indicators can be customized when indicatorType is a function.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/carousel/__example__/04-custom.js

@@ -0,0 +1,127 @@
+"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 _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 自定义 Indicator
+ *    -- 当 indicatorType 为函数时，可以自定义 Indicator
+ * en - Custom Indicator
+ *    -- Indicators can be customized when indicatorType is a function.
+ */
+
+require("./style-2-custom-indicator.css");
+var containerStyle = {
+  fontSize: 40,
+  color: '#fff',
+  display: 'flex',
+  margin: 'auto'
+};
+var items = ['S', 'H', 'I', 'N', 'E'];
+var duration = 5000;
+var App = function App() {
+  var indicatorSwitch = function indicatorSwitch(current, moveTo) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "indicator",
+      children: items.map(function (item, index) {
+        var isActive = current === index;
+        var itemClassname = (0, _classnames.default)('indicator-item', isActive && 'active');
+        var animationStyle = isActive ? {
+          animation: "indicator-rise ".concat(duration / 1000, "s linear")
+        } : {};
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          onClick: function onClick() {
+            return moveTo(index);
+          },
+          className: itemClassname,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: item
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "indicator-progress",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fg",
+              style: animationStyle
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "bg"
+            })]
+          })]
+        }, item);
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Carousel, {
+    indicatorType: indicatorSwitch,
+    style: {
+      width: 600,
+      height: 280
+    },
+    interval: duration,
+    children: items.map(function (item) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          background: '#2e97f1',
+          display: 'flex'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: containerStyle,
+          children: item
+        })
+      }, item);
+    })
+  });
+};
+var _default = App;
+/* style-2-custom-indicator.css
+@keyframes indicator-rise {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+div.indicator {
+  text-align: center;
+  user-select: none;
+  float: left;
+}
+div.indicator-item {
+  margin-right: 10px;
+  float: left;
+  width: 36px;
+  height: 30px;
+  font-size: 20px;
+  color: #ffffff50;
+  cursor: pointer;
+}
+div.indicator-item.active {
+  color: #fff;
+}
+div.indicator .indicator-progress {
+  position: relative;
+}
+div.indicator .indicator-progress > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+}
+div.indicator .indicator-progress .bg {
+  width: 100%;
+  background: #ffffff50;
+}
+div.indicator .indicator-progress .fg {
+  width: 0;
+  background: #ffffff;
+}
+*/
+exports.default = _default;

package/cjs/carousel/__example__/style-2-custom-indicator.css

@@ -0,0 +1,47 @@
+.indicator-item {
+  text-align: center;
+  margin-right: 10px;
+  float: left;
+  width: 36px;
+  height: 30px;
+  font-size: 20px;
+  color: #ffffff50;
+  cursor: pointer;
+}
+
+.indicator-item.active {
+  color: #fff;
+}
+
+.indicator-progress {
+  position: relative;
+}
+
+.indicator-progress > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+}
+
+.indicator-progress .bg {
+  width: 100%;
+  background: #ffffff50;
+}
+
+.indicator-progress .fg {
+  width: 0;
+  background: #fff;
+}
+
+@keyframes indicator-rise {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}

package/cjs/carousel/carousel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CarouselProps } from './carousel.type';
+declare const _default: (props: CarouselProps) => JSX.Element;
+export default _default;

package/cjs/carousel/carousel.js

@@ -0,0 +1,28 @@
+"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 _react = require("react");
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+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 _default = function _default(props) {
+  var jssStyle = (0, _react.useMemo)(function () {
+    return {
+      carousel: _shineoutStyle.useCarouselStyle
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Carousel, _objectSpread(_objectSpread({}, props), {}, {
+    jssStyle: jssStyle
+  }));
+};
+exports.default = _default;

package/cjs/carousel/carousel.type.d.ts

@@ -0,0 +1,2 @@
+import { CarouselProps as UnStyledCarouselProps } from '@sheinx/base';
+export declare type CarouselProps = Omit<UnStyledCarouselProps, 'jssStyle'>;

package/cjs/carousel/carousel.type.js

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

package/cjs/carousel/index.d.ts

@@ -0,0 +1,7 @@
+import Carousel from './carousel';
+declare type RefCarousel = typeof Carousel;
+export interface CarouselComponent extends RefCarousel {
+    displayName: string;
+}
+declare const CarouselComp: CarouselComponent;
+export default CarouselComp;

package/cjs/carousel/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _carousel = _interopRequireDefault(require("./carousel"));
+var CarouselComp = _carousel.default;
+CarouselComp.displayName = 'ShineoutCarousel';
+var _default = CarouselComp;
+exports.default = _default;

package/cjs/carousel/interface.d.ts

@@ -0,0 +1 @@
+export type { CarouselProps as Props } from './carousel.type';

package/cjs/carousel/interface.js

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

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

@@ -0,0 +1,9 @@
+/**
+ * cn - 基本用法
+ *    -- 基本的 Checkbox
+ * en - Base
+ *    -- Basic Checkbox
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

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

@@ -0,0 +1,24 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    -- 基本的 Checkbox
+ * en - Base
+ *    -- Basic Checkbox
+ */
+
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+    children: "Checkbox"
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/checkbox/__example__/001-size.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 尺寸
+ *    -- 设置 `size` 属性改变组件的尺寸大小, 内置三种尺寸：small、default、large。
+ * en - Base
+ *    -- Set the size property to change the size of the component. There are three built-in sizes: small, default, and large.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/checkbox/__example__/001-size.js

@@ -0,0 +1,36 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 尺寸
+ *    -- 设置 `size` 属性改变组件的尺寸大小, 内置三种尺寸：small、default、large。
+ * en - Base
+ *    -- Set the size property to change the size of the component. There are three built-in sizes: small, default, and large.
+ */
+
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      size: 'small',
+      children: "Checkbox"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      children: "Checkbox"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      size: 'large',
+      children: "Checkbox"
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/checkbox/__example__/002-checked-1.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 状态
+ *    -- checked 有三个值，选中(true)、未选中(false)、半选中('indeterminate')，checked 设置时为受控组件（此示例没有处理 onChange 事件）。
+ * en - Checked
+ *    -- The checked has three values: true(checked), false(not checked), 'indeterminate'(half-checked).
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/checkbox/__example__/002-checked-1.js

@@ -0,0 +1,45 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 状态
+ *    -- checked 有三个值，选中(true)、未选中(false)、半选中('indeterminate')，checked 设置时为受控组件（此示例没有处理 onChange 事件）。
+ * en - Checked
+ *    -- The checked has three values: true(checked), false(not checked), 'indeterminate'(half-checked).
+ */
+
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      checked: false,
+      children: "not checked"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      checked: true,
+      children: "checked"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      checked: "indeterminate",
+      children: "indeterminate"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      checked: false,
+      disabled: true,
+      children: "not checked"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      checked: true,
+      disabled: true,
+      children: "checked"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      checked: "indeterminate",
+      disabled: true,
+      children: "indeterminate"
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/checkbox/__example__/002-checked-2.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 全选/半选
+ *    -- 通过设置 checked = 'indeterminate' 属性，可以实现半选效果。
+ * en - Check all
+ *    -- Set checked = 'indeterminate' to achieve half-check effect.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/checkbox/__example__/002-checked-2.js

@@ -0,0 +1,59 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * cn - 全选/半选
+ *    -- 通过设置 checked = 'indeterminate' 属性，可以实现半选效果。
+ * en - Check all
+ *    -- Set checked = 'indeterminate' to achieve half-check effect.
+ */
+
+var data = ['Option1', 'Option2', 'Option3'];
+var getChecked = function getChecked(value, num) {
+  if (value.length === num) return true;
+  if (value.length === 0) return false;
+  return 'indeterminate';
+};
+var App = function App() {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+      checked: getChecked(value, data.length),
+      onChange: function onChange(v) {
+        if (v) {
+          setValue(data);
+        } else {
+          setValue([]);
+        }
+      },
+      children: getChecked(value, data.length) === true ? 'UnCheckAll' : 'CheckAll'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox.Group, {
+      style: {
+        marginTop: 12
+      },
+      data: data,
+      keygen: true,
+      value: value,
+      onChange: setValue
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/checkbox/__example__/003-value.d.ts

@@ -0,0 +1,10 @@
+/**
+ * cn - 选中值
+ *    -- 未设置htmlValue的状态下，checkbox选中时返回true，如果设置 htmlValue，返回 htmlValue。未选中状态都是返回 undefined。
+ * en - Value
+ *    -- When the htmlValue is set, the checkbox return the htmlValue (checked) and undefined (not checked);
+ *    -- When the htmlValue is not set, the checkbox selected return true (checked) and undefined (not checked);
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/checkbox/__example__/003-value.js

@@ -0,0 +1,27 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 选中值
+ *    -- 未设置htmlValue的状态下，checkbox选中时返回true，如果设置 htmlValue，返回 htmlValue。未选中状态都是返回 undefined。
+ * en - Value
+ *    -- When the htmlValue is set, the checkbox return the htmlValue (checked) and undefined (not checked);
+ *    -- When the htmlValue is not set, the checkbox selected return true (checked) and undefined (not checked);
+ */
+
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+    htmlValue: "ok",
+    onChange: console.log,
+    children: 'value is "ok"'
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/checkbox/__example__/004-rawgroup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 一组复选框
+ *    -- 一组复选框可以放在 Checkbox.Group 中
+ * en - Group
+ *    -- A series of checkboxes group by Checkbox.Group.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/checkbox/__example__/004-rawgroup.js

@@ -0,0 +1,54 @@
+"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 _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 一组复选框
+ *    -- 一组复选框可以放在 Checkbox.Group 中
+ * en - Group
+ *    -- A series of checkboxes group by Checkbox.Group.
+ */
+
+var data = [{
+  id: 1,
+  color: 'red'
+}, {
+  id: 2,
+  color: 'cyan'
+}, {
+  id: 3,
+  color: 'blue'
+}, {
+  id: 4,
+  color: 'green'
+}, {
+  id: 5,
+  color: 'yellow'
+}, {
+  id: 6,
+  color: 'orange'
+}, {
+  id: 7,
+  color: 'violet'
+}];
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox.Group, {
+    keygen: "id",
+    defaultValue: [3, 5],
+    children: data.map(function (d) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+        htmlValue: d.id,
+        children: d.color
+      }, d.id);
+    })
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/checkbox/__example__/005-group.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn -
+ *    -- 可以直接通过数据来渲染一组 Checkbox
+ * en -
+ *    -- Render a group of checkboxes from data.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;