shineout 3.0.0-alpha.2 → 3.0.0-alpha.3

package/cjs/cascader/__example__/05-loader.js

@@ -0,0 +1,103 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireWildcard(require("react"));
+var _immer = require("immer");
+var _2 = 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 - 动态加载
+ *    -- 配置`loader`开启动态加载功能，当点击的节点没有子节点时，会调用`loader`函数
+ *    -- 注意，该功能仅支持`mode`为 3 或 4 模式
+ * en - Loader
+ *    -- Set `loader` property to enable dynamic loading. When the node has no children, the `loader` function will be called
+ *    -- Note that this feature only supports mode 3 or 4
+ */
+
+var initData = ['0', '1', '2', '3', '4', '5', '6', '7', '8'].map(function (i) {
+  return {
+    id: i
+  };
+});
+var createRange = function createRange() {
+  return Array.from({
+    length: Math.round(Math.random() * 4)
+  }, function (_, i) {
+    return i;
+  });
+};
+var _default = function _default() {
+  var _useState = (0, _react.useState)(initData),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    _data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var loader = function loader(key) {
+    var path = key.toString().split(',');
+    console.log(23333);
+    setTimeout(function () {
+      var producer = (0, _immer.produce)(function (draft) {
+        var _draft = draft,
+          data = _draft.data;
+        path.forEach(function (pid, i) {
+          data = draft.find(function (d) {
+            return d.id === pid;
+          });
+          if (i < path.length - 1) draft = data.children;
+        });
+        data.children = (0, _toConsumableArray2.default)(createRange().map(function (i) {
+          return {
+            id: "".concat(data.id, "-").concat(i)
+          };
+        }));
+      });
+      var nextState = producer(_data);
+      setData(nextState);
+    }, 500);
+  };
+  var handleChange = function handleChange(v) {
+    return setValue(v);
+  };
+  var renderItem = function renderItem(node) {
+    return "node ".concat(node.id);
+  };
+  var keyGenerator = function keyGenerator(node, parentKey) {
+    return "".concat(String(parentKey), ",").concat(node.id).replace(/^,/, '');
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Cascader, {
+      mode: 3,
+      width: 300,
+      placeholder: "Please select city",
+      data: _data,
+      loader: loader,
+      value: value,
+      onChange: handleChange,
+      keygen: keyGenerator,
+      renderItem: renderItem
+    })
+  });
+};
+exports.default = _default;

package/cjs/cascader/__example__/06-filter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/cascader/__example__/06-filter.js

@@ -0,0 +1,54 @@
+"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 - 过滤数据（本地）
+ *    -- 设置`onFilter`属性且返回内容为函数时，会根据返回的过滤函数对本地数据进行过滤
+ * en - Filter data (local)
+ *    -- Set the `onFilter` property and return the content as a function, the local data will be filtered according to the returned filter function
+ */
+
+var data = [{
+  value: 'jiangsu',
+  children: [{
+    value: 'nanjing',
+    children: [{
+      value: 'jiangning'
+    }]
+  }]
+}, {
+  value: 'anhui',
+  children: [{
+    value: 'hefei',
+    children: [{
+      value: 'feidong'
+    }]
+  }]
+}];
+var _default = function _default() {
+  var onFilter = function onFilter(text) {
+    return function (d) {
+      return d.value.indexOf(text) >= 0;
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Cascader, {
+      width: 300,
+      placeholder: "Please select city",
+      data: data,
+      keygen: "value",
+      onFilter: onFilter,
+      renderItem: function renderItem(n) {
+        return "".concat(n === null || n === void 0 ? void 0 : n.value);
+      }
+    })
+  });
+};
+exports.default = _default;

package/cjs/cascader/cascader.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { KeygenResult } from '@sheinx/hooks';
+import { CascaderProps } from './cascader.type';
+declare const _default: <DataItem, Value extends KeygenResult[]>(props: CascaderProps<DataItem, Value>) => JSX.Element;
+export default _default;

package/cjs/cascader/cascader.js

@@ -0,0 +1,44 @@
+"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");
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _useFieldCommon = _interopRequireDefault(require("../hooks/use-field-common"));
+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; }
+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 jssStyle = {
+  cascader: _shineoutStyle.useCascaderStyle,
+  tag: _shineoutStyle.useTagStyle,
+  select: _shineoutStyle.useSelectStyle,
+  innerTitle: _shineoutStyle.useInnerTitleStyle,
+  virtualScroll: _shineoutStyle.useVirtualScrollStyle,
+  popover: _shineoutStyle.usePopoverStyle,
+  checkbox: _shineoutStyle.useCheckboxStyle,
+  radio: _shineoutStyle.useRadioStyle,
+  spin: _shineoutStyle.useSpinStyle
+};
+var Cascader = function Cascader(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Cascader, _objectSpread(_objectSpread({}, props), {}, {
+    jssStyle: jssStyle
+  }));
+};
+var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
+  return (0, _useFieldCommon.default)(props, Cascader);
+});
+exports.default = _default;

package/cjs/cascader/cascader.type.d.ts

@@ -0,0 +1,5 @@
+import { CascaderProps as UnStyledCascaderProps } from '@sheinx/base';
+import { KeygenResult } from '@sheinx/hooks';
+import { GetWithFieldProps } from '../hooks/use-field-common';
+export declare type BaseCascaderProps<DataItem, Value extends KeygenResult[]> = Omit<UnStyledCascaderProps<DataItem, Value>, 'jssStyle'>;
+export declare type CascaderProps<DataItem, Value extends KeygenResult[]> = GetWithFieldProps<BaseCascaderProps<DataItem, Value>, BaseCascaderProps<DataItem, Value>['value']>;

package/cjs/cascader/cascader.type.js

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

package/cjs/cascader/index.d.ts

@@ -0,0 +1,7 @@
+import Cascader from './cascader';
+declare type RefCascader = typeof Cascader;
+export interface CascaderComponent extends RefCascader {
+    displayName: string;
+}
+declare const CascaderComp: CascaderComponent;
+export default CascaderComp;

package/cjs/cascader/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 _cascader = _interopRequireDefault(require("./cascader"));
+var CascaderComp = _cascader.default;
+CascaderComp.displayName = 'ShineoutCascader';
+var _default = CascaderComp;
+exports.default = _default;

package/cjs/cascader/interface.d.ts

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

package/cjs/cascader/interface.js

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

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

@@ -17,27 +17,38 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 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"
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        marginBottom: 12,
+        lineHeight: 0
+      },
+      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.jsxs)("div", {
+      style: {
+        lineHeight: 0
+      },
+      children: [/*#__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"
+      })]
     })]
   });
 };

package/cjs/collapse/__example__/01-base.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/collapse/__example__/01-base.js

@@ -0,0 +1,46 @@
+"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 - 基本用法
+ *    -- 基础折叠面板，可自定义面板内容
+ * en - Basic
+ *    -- Basic collapse, you can customize the content of the panel
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+      defaultActive: ['1', '3'],
+      style: {
+        maxWidth: 1180
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 1",
+        keygen: "0",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 2",
+        keygen: "1",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 3",
+        keygen: "2",
+        disabled: true,
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 4",
+        keygen: "3",
+        disabled: true,
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      })]
+    })
+  });
+};
+exports.default = _default;

package/cjs/collapse/__example__/02-accordion.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/collapse/__example__/02-accordion.js

@@ -0,0 +1,44 @@
+"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 - 手风琴模式
+ *    -- 手风琴模式，每次只能展开一个面板
+ * en - accordion
+ *    -- Accordion mode, only one panel can be expanded at a time
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+      accordion: true,
+      style: {
+        maxWidth: 1180
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 1",
+        keygen: "0",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 2",
+        keygen: "1",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 3",
+        keygen: "2",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 4",
+        keygen: "3",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      })]
+    })
+  });
+};
+exports.default = _default;

package/cjs/collapse/__example__/03-nestedPanels.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/collapse/__example__/03-nestedPanels.js

@@ -0,0 +1,55 @@
+"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 - 嵌套面板
+ *    -- 嵌套面板
+ * en - Nested panels
+ *    -- Nested panels
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+      style: {
+        maxWidth: 1180
+      },
+      defaultActive: ['0'],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 1",
+        keygen: "0",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+          defaultActive: ['1'],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+            title: "This is panel nest header 2",
+            keygen: "1",
+            children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+            title: "This is panel nest header 3",
+            keygen: "2",
+            children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 2",
+        keygen: "3",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 3",
+        keygen: "4",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 4",
+        keygen: "5",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      })]
+    })
+  });
+};
+exports.default = _default;

package/cjs/collapse/__example__/04-simplePanel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/collapse/__example__/04-simplePanel.js

@@ -0,0 +1,41 @@
+"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 - 简洁面板
+ *    -- 无边框的简洁模式
+ * en - Simple panel
+ *    -- Simple mode without border
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+      defaultActive: ['0'],
+      style: {
+        maxWidth: 1180
+      },
+      border: false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 1",
+        keygen: "0",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 2",
+        keygen: "1",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 3",
+        keygen: "2",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      })]
+    })
+  });
+};
+exports.default = _default;

package/cjs/collapse/__example__/05-customize.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/collapse/__example__/05-customize.js

@@ -0,0 +1,72 @@
+"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 - 自定义面板样式
+ *    -- 可自定义标题背景色、内容背景色、折叠图标等
+ * en - Customize
+ *    -- You can customize the title background color, content background color, collapse icon, etc.
+ */
+var _default = function _default() {
+  var arrowIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10.6957 5.75207L16.2694 11.3386C16.6589 11.7289 16.6589 12.3609 16.2694 12.7512L10.7576 18.2751C10.3675 18.6661 9.73435 18.6668 9.3434 18.2767C9.15675 18.0904 9.05121 17.838 9.04974 17.5744L8.98776 6.46395C8.98467 5.91168 9.42988 5.46147 9.98216 5.45839C10.2497 5.4569 10.5067 5.56268 10.6957 5.75207Z",
+      fill: "#666C7C"
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+      defaultActive: ['1'],
+      style: {
+        maxWidth: 1180
+      },
+      expandIcon: arrowIcon,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 1",
+        keygen: "0",
+        style: {
+          background: '#F4F5F8'
+        },
+        contentStyle: {
+          background: '#FFFFFF'
+        },
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 2",
+        keygen: "1",
+        style: {
+          background: '#F4F5F8'
+        },
+        contentStyle: {
+          background: '#FFFFFF'
+        },
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 3",
+        keygen: "2",
+        disabled: true,
+        style: {
+          background: '#F4F5F8'
+        },
+        contentStyle: {
+          background: '#FFFFFF'
+        },
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      })]
+    })
+  });
+};
+exports.default = _default;

package/cjs/collapse/__example__/06-extra.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;