@ebscn/ui 1.0.3-beta.3 → 1.0.3-beta.30

package/es/components/checkbox/checkbox.css

@@ -1,11 +1,14 @@
 .ebscn-checkbox {
-  --icon-size: 24px;
+  --icon-size: 20px;
+  --icon-wrap-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;
+  min-width: var(--icon-wrap-size);
+  min-height: var(--icon-wrap-size);
   cursor: pointer;
 }
 .ebscn-checkbox input {
@@ -17,11 +20,15 @@
   --gap: 9px;
 }
 .ebscn-checkbox .ebscn-checkbox-icon {
+  margin: auto;
   flex: none;
+  border-radius: 20px;
   border-radius: var(--icon-size);
   border: 1px solid var(--ebscn-color-light);
   box-sizing: border-box;
+  width: 20px;
   width: var(--icon-size);
+  height: 20px;
   height: var(--icon-size);
   color: var(--ebscn-color-text-light-solid);
 }
@@ -81,7 +88,6 @@
 }
 .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 {

package/es/components/date-range-picker/date-range-picker.css

@@ -3,8 +3,10 @@
   --title-font-size: var(--ebscn-font-size-7);
   --item-font-size: var(--ebscn-font-size-8);
   --item-height: 34px;
+  font-size: 14px;
+  font-size: var(--ebscn-font-size-6);
   width: 100%;
-  height: 350px;
+  height: 385px;
   overflow: hidden;
   position: relative;
   display: flex;
@@ -21,10 +23,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 4px 4px;
+  padding: 24px 16px 16px;
 }
 .ebscn-date-range-picker-header-button {
-  font-size: var(--header-button-font-size);
+  font-size: 16px;
   display: inline-block;
   padding: 8px 8px;
 }
@@ -35,30 +37,49 @@
 }
 .ebscn-date-range-picker-header-title {
   padding: 4px 4px;
+  font-size: 18px;
   font-size: var(--ebscn-font-size-10);
   color: #333;
+  color: var(--ebscn-color-text);
   text-align: center;
   flex: 1;
-  font-weight: Medium;
+  font-weight: 500;
 }
 .ebscn-date-range-picker-buttons-wrap {
   display: flex;
+  gap: 10px;
   justify-content: space-evenly;
   margin-top: 12px;
+  padding: 0 16px;
+}
+.ebscn-date-range-picker-buttons-wrap svg {
+  font-size: 18px;
 }
 .ebscn-date-range-picker-buttons-wrap .ebscn-date-range-picker-button {
-  width: 100px;
+  min-width: 75px;
+  max-width: 100px;
+  flex: 1;
   height: 28px;
   line-height: 28px;
   text-align: center;
   background-color: #f8f9fc;
+  background-color: var(--search-box-bg);
   color: #333;
-  border-radius: 10px;
+  color: var(--ebscn-color-text);
+  border-radius: 4px;
+  font-size: 14px;
   font-size: var(--ebscn-font-size-6);
 }
+.ebscn-date-range-picker-buttons-wrap .ebscn-date-range-picker-button-active {
+  color: #e84225;
+  color: var(--ebscn-color-primary);
+  background-color: rgba(232, 66, 37, 0.06);
+}
 .ebscn-date-range-picker-values-wrap {
   display: flex;
+  justify-content: space-between;
   justify-content: center;
+  align-items: center;
   gap: 20px;
   margin-top: 12px;
 }
@@ -70,14 +91,17 @@
   text-align: center;
 }
 .ebscn-date-range-picker-values-wrap .ebscn-date-range-picker-value-active {
-  border-bottom-color: var(--ebscn-color-primary);
+  color: var(--ebscn-color-blue);
+  border-bottom-color: var(--ebscn-color-blue);
 }
 .ebscn-date-range-picker-tip {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 12px;
+  color: #e84225;
   color: var(--ebscn-color-primary);
+  font-size: 14px;
   font-size: var(--ebscn-font-size-6);
 }
 .ebscn-date-range-picker-body {

package/es/components/date-range-picker/date-range-picker.d.ts

@@ -40,6 +40,7 @@ export type DateRangePickerProps = {
         value: [PickerDate, PickerDate];
     }>;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+export declare function isSameDate(date1: Date, date2: Date): boolean;
 export declare const DateRangePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     value?: [] | [Date, Date] | undefined;
     defaultValue?: [] | [Date, Date] | undefined;

package/es/components/date-range-picker/date-range-picker.js

@@ -114,7 +114,6 @@ var __generator = this && this.__generator || function (thisArg, body) {
   }
 };
 import { useMemoizedFn } from 'ahooks';
-import SafeArea from '../safe-area';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from 'react';
@@ -125,6 +124,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import DatePickerView from '../date-picker-view';
 import { defaultRenderLabel } from '../picker/picker-utils';
 import Popup from '../popup';
+import SafeArea from '../safe-area';
 var classPrefix = "ebscn-date-range-picker";
 var thisYear = new Date().getFullYear();
 var defaultProps = {
@@ -138,6 +138,11 @@ var defaultProps = {
   precision: 'day',
   quickButtons: []
 };
+export function isSameDate(date1, date2) {
+  var str1 = "".concat(date1.getFullYear(), "-").concat(date1.getMonth(), "-").concat(date1.getDate());
+  var str2 = "".concat(date2.getFullYear(), "-").concat(date2.getMonth(), "-").concat(date2.getDate());
+  return str1 === str2;
+}
 export var DateRangePicker = memo(forwardRef(function (p, ref) {
   var _a, _b;
   var _c;
@@ -202,8 +207,10 @@ export var DateRangePicker = memo(forwardRef(function (p, ref) {
     innerValue = _f[0],
     setInnerValue = _f[1];
   useEffect(function () {
+    var _a;
     //todo
     setInnerValue(pickerValue);
+    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, pickerValue);
   }, [visible, pickerValue]);
   var _g = useState(0),
     activeIndex = _g[0],
@@ -216,7 +223,7 @@ export var DateRangePicker = memo(forwardRef(function (p, ref) {
     }
   });
   var onQuickClick = function (value) {
-    setInnerValue(value);
+    onChange(value);
   };
   var renderLabel = function (_, value) {
     return value;
@@ -237,32 +244,33 @@ export var DateRangePicker = memo(forwardRef(function (p, ref) {
     className: "".concat(classPrefix, "-header-title")
   }, props.title), React.createElement("a", {
     role: "button",
-    className: classNames("".concat(classPrefix, "-header-button"), props.loading && "".concat(classPrefix, "-header-button-disabled")),
+    className: classNames("".concat(classPrefix, "-header-button"), (props.loading || props.tip) && "".concat(classPrefix, "-header-button-disabled")),
     onClick: function () {
-      if (props.loading) return;
+      if (props.loading || props.tip) return;
       setValue(innerValue, true);
       setVisible(false);
     },
     "aria-disabled": props.loading
-  }, props.confirmText)), props.quickButtons.length && React.createElement("div", {
+  }, props.confirmText)), props.quickButtons.length ? React.createElement("div", {
     className: "".concat(classPrefix, "-buttons-wrap")
-  }, props.quickButtons.map(function (_a) {
+  }, props.quickButtons.map(function (_a, index) {
     var label = _a.label,
       value = _a.value;
     return React.createElement("div", {
+      key: index,
       onClick: function () {
         return onQuickClick(value);
       },
-      className: "".concat(classPrefix, "-button")
+      className: "".concat(classPrefix, "-button ").concat(isSameDate(value[0], innerValue[0]) && isSameDate(value[1], innerValue[1]) ? "".concat(classPrefix, "-button-active") : '')
     }, label);
-  })), React.createElement("div", {
+  })) : null, React.createElement("div", {
     className: "".concat(classPrefix, "-values-wrap")
   }, React.createElement("div", {
     className: classNames("".concat(classPrefix, "-value"), (_a = {}, _a["".concat(classPrefix, "-value-active")] = activeIndex === 0, _a)),
     onClick: function () {
       return setActiveIndex(0);
     }
-  }, dayjs(innerValue[0]).format('YYYY-MM-DD')), React.createElement("div", {
+  }, dayjs(innerValue[0]).format('YYYY-MM-DD')), React.createElement("span", null, "\u81F3"), React.createElement("div", {
     className: classNames("".concat(classPrefix, "-value"), (_b = {}, _b["".concat(classPrefix, "-value-active")] = activeIndex === 1, _b)),
     onClick: function () {
       return setActiveIndex(1);

package/es/components/divider/divider.css

@@ -3,9 +3,10 @@
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--color);
+  border-color: var(--ebscn-color-split-line);
   border-style: solid;
-  color: var(--ebscn-color-weak);
+  color: #ebebeb;
+  color: var(--ebscn-color-split-line);
   font-size: 14px;
 }
 .ebscn-divider-left.ebscn-divider-horizontal::before {
@@ -35,5 +36,5 @@
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--color);
+  border-left: 1px solid var(--ebscn-color-split-line);
 }

package/es/components/header/header.css

@@ -3,6 +3,7 @@
   --bgColor: #FFFFFF;
   --subTitleColor: #666666;
   --buttonColor: #666666;
+  --icon-size: 20px;
   display: flex;
   align-items: center;
   height: 44px;
@@ -15,7 +16,11 @@
 .ebscn-header-left,
 .ebscn-header-right {
   flex: 1;
-  font-size: 28px;
+  font-size: 20px;
+  font-size: var(--icon-size);
+}
+.ebscn-header-left-back {
+  padding: 4px;
 }
 .ebscn-header-title {
   flex: auto;
@@ -54,6 +59,7 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  margin-right: 4px;
 }
 .ebscn-header-text-button {
   font-size: 15px;

package/es/components/header/header.js

@@ -14,11 +14,13 @@ var Header = function (p) {
   return withNativeProps(props, React.createElement("div", {
     className: classNames(classPrefix)
   }, React.createElement("div", {
-    className: "".concat(classPrefix, "-left"),
+    className: "".concat(classPrefix, "-left")
+  }, props.showLeftIcon && React.createElement("div", {
+    className: "".concat(classPrefix, "-left-back"),
     onClick: function () {
       return props.onLeftClick();
     }
-  }, props.showLeftIcon && React.createElement(BackIcon, null), props.left), React.createElement("div", {
+  }, React.createElement(BackIcon, null), " "), props.left), React.createElement("div", {
     className: "".concat(classPrefix, "-title")
   }, props.title && React.createElement("div", null, props.title), props.subTitle && React.createElement("div", {
     className: "".concat(classPrefix, "-subtitle")

package/es/components/icons/back-icon.js

@@ -10,6 +10,7 @@ var BackIcon = memo(function (props) {
     width: "1em",
     height: "1em"
   }, React.createElement("path", {
+    fill: "currentColor",
     d: "M361.344 121.392a32 32 0 0 1 45.312 45.216l-334.4 335.136a15.6 15.6 0 0 0 0.032 22.064l334.32 333.536a32 32 0 1 1-45.216 45.312L27.088 569.104a79.6 79.6 0 0 1-0.128-112.56l334.4-335.152z",
     "p-id": "8061"
   })));

package/es/components/icons/clear-icon.js

@@ -10,6 +10,7 @@ var ClearIcon = memo(function (props) {
     width: "1em",
     height: "1em"
   }, React.createElement("path", {
+    fill: "currentColor",
     d: "M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64zM342.624 297.376a32 32 0 0 0-45.248 0l-1.872 2.032a32 32 0 0 0 1.872 43.216L466.72 512 297.376 681.376a32 32 0 0 0 0 45.248l2.032 1.872a32 32 0 0 0 43.216-1.872L512 557.248l169.376 169.376a32 32 0 0 0 45.248 0l1.872-2.032a32 32 0 0 0-1.872-43.216L557.248 512l169.376-169.376a32 32 0 0 0 0-45.248l-2.032-1.872a32 32 0 0 0-43.216 1.872L512 466.72z",
     "p-id": "8691"
   })));

package/es/components/icons/close-icon.js

@@ -8,7 +8,8 @@ var CloseIcon = memo(function (props) {
     xmlns: "http://www.w3.org/2000/svg",
     "p-id": "8217",
     width: "1em",
-    height: "1em"
+    height: "1em",
+    fill: "currentColor"
   }, React.createElement("path", {
     d: "M137.376 137.376a32 32 0 0 1 45.248 0l712.768 712.768a32 32 0 1 1-45.248 45.248L137.376 182.624a32 32 0 0 1 0-45.248z",
     "p-id": "8218"

package/es/components/icons/down-icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare const DownIcon: React.NamedExoticComponent<NativeProps>;
+export default DownIcon;

package/es/components/icons/down-icon.js

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+var DownIcon = memo(function (props) {
+  return withNativeProps(props, React.createElement("svg", {
+    className: "ebscn-ui-icon",
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "3136",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, React.createElement("path", {
+    d: "M121.392 358.656a32 32 0 1 1 45.216-45.312l335.136 334.4c6.096 6.08 15.968 6.064 22.064-0.032l333.536-334.32a32 32 0 1 1 45.312 45.216L569.104 692.912a79.6 79.6 0 0 1-112.56 0.128l-335.152-334.4z",
+    "p-id": "3137"
+  })));
+});
+export default DownIcon;

package/es/components/icons/dustbin-icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare const DustbinIcon: React.NamedExoticComponent<NativeProps>;
+export default DustbinIcon;

package/es/components/icons/dustbin-icon.js

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+var DustbinIcon = memo(function (props) {
+  return withNativeProps(props, React.createElement("svg", {
+    className: "ebscn-ui-icon",
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "3293",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, React.createElement("path", {
+    d: "M544 64a48 48 0 0 1 48 48v16h304a32 32 0 1 1 0 64H256v656a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V285.488a32 32 0 1 1 64 0V848a96 96 0 0 1-96 96H288a96 96 0 0 1-96-96V192H128a32 32 0 1 1 0-64h336V112a48 48 0 0 1 48-48h32z m-128 208a32 32 0 0 1 32 32v464a32 32 0 1 1-64 0V304a32 32 0 0 1 32-32z m192 0a32 32 0 0 1 32 32v464a32 32 0 1 1-64 0V304a32 32 0 0 1 32-32z",
+    "p-id": "3294"
+  })));
+});
+export default DustbinIcon;

package/es/components/icons/index.d.ts

@@ -3,6 +3,8 @@ export { default as CheckIcon } from './check-icon';
 export { default as CheckOnlyIcon } from './check-only-icon';
 export { default as ClearIcon } from './clear-icon';
 export { default as CloseIcon } from './close-icon';
+export { default as DownIcon } from './down-icon';
+export { default as DustbinIcon } from './dustbin-icon';
 export { default as GdlogoIcon } from './gdlogo-icon';
 export { default as IndeterminateIcon } from './indeterminate-icon';
 export { default as LoadingIcon } from './loading-icon';
@@ -12,4 +14,5 @@ export { default as SearchIcon } from './search-icon';
 export { default as SelectorIcon } from './selector-icon';
 export { default as SpinIcon } from './spin-icon';
 export { default as UncheckIcon } from './uncheck-icon';
+export { default as UpIcon } from './up-icon';
 export { default as WarningIcon } from './warning-icon';

package/es/components/icons/index.js

@@ -3,6 +3,8 @@ export { default as CheckIcon } from './check-icon';
 export { default as CheckOnlyIcon } from './check-only-icon';
 export { default as ClearIcon } from './clear-icon';
 export { default as CloseIcon } from './close-icon';
+export { default as DownIcon } from './down-icon';
+export { default as DustbinIcon } from './dustbin-icon';
 export { default as GdlogoIcon } from './gdlogo-icon';
 export { default as IndeterminateIcon } from './indeterminate-icon';
 export { default as LoadingIcon } from './loading-icon';
@@ -12,4 +14,5 @@ export { default as SearchIcon } from './search-icon';
 export { default as SelectorIcon } from './selector-icon';
 export { default as SpinIcon } from './spin-icon';
 export { default as UncheckIcon } from './uncheck-icon';
+export { default as UpIcon } from './up-icon';
 export { default as WarningIcon } from './warning-icon';

package/es/components/icons/notice-icon.js

@@ -11,11 +11,11 @@ var NoticeIcon = memo(function (props) {
     height: "1em"
   }, React.createElement("path", {
     d: "M614.4 268.8a32 32 0 0 1 44.8-6.4C752.128 332.096 800 415.872 800 512c0 96.128-47.872 179.904-140.8 249.6a32 32 0 1 1-38.4-51.2C698.528 652.096 736 586.528 736 512s-37.472-140.096-115.2-198.4a32 32 0 0 1-6.4-44.8zM370.368 108.352A96 96 0 0 1 544 164.8v694.368a96 96 0 0 1-173.632 56.48L249.28 749.168A32 32 0 0 0 223.408 736H176a112 112 0 0 1-112-112V400a112 112 0 0 1 112-112h47.408a32 32 0 0 0 25.888-13.184l121.072-166.464z m96.448 30.576a32 32 0 0 0-44.688 7.056L301.056 312.48A96 96 0 0 1 223.408 352H176a48 48 0 0 0-48 48v224a48 48 0 0 0 48 48h47.408a96 96 0 0 1 77.648 39.536l121.072 166.48A32 32 0 0 0 480 859.184V164.816a32 32 0 0 0-13.184-25.888z",
-    fill: "#333333",
+    fill: "currentColor",
     "p-id": "8376"
   }), React.createElement("path", {
     d: "M745.376 137.376a32 32 0 0 1 45.248 0C903.04 249.792 960 375.088 960 512c0 136.912-56.96 262.208-169.376 374.624a32 32 0 0 1-45.248-45.248C846.288 740.448 896 631.088 896 512c0-119.088-49.712-228.448-150.624-329.376a32 32 0 0 1 0-45.248z",
-    fill: "#333333",
+    fill: "currentColor",
     "p-id": "8377"
   })));
 });

package/es/components/icons/right-icon.js

@@ -10,6 +10,7 @@ var RightIcon = memo(function (props) {
     width: "1em",
     height: "1em"
   }, React.createElement("path", {
+    fill: "currentColor",
     d: "M662.656 121.392a32 32 0 0 0-45.312 45.216l334.4 335.136c6.08 6.096 6.064 15.968-0.032 22.064L617.392 857.344a32 32 0 1 0 45.216 45.312l334.304-333.552a79.6 79.6 0 0 0 0.128-112.56l-334.4-335.152z",
     "p-id": "8534"
   })));

package/es/components/icons/search-icon.js

@@ -8,7 +8,8 @@ var SearchIcon = memo(function (props) {
     xmlns: "http://www.w3.org/2000/svg",
     "p-id": "7902",
     width: "1em",
-    height: "1em"
+    height: "1em",
+    fill: "currentColor"
   }, React.createElement("path", {
     d: "M928 510c0 106.384-38.288 204.24-106.368 280.832l-42.56 46.8C702.512 905.712 604.64 944 498.288 944 251.472 944 55.744 739.76 64.256 492.992c8.512-221.264 191.456-404.208 416.96-412.72C728.032 71.76 928 267.472 928 510zM483.648 144.224C292.176 151.44 135.472 307.04 128.224 495.2 120.96 706.144 288.048 880 498.256 880c86.848 0 167.616-29.888 232.464-85.12l3.472-3.024 39.6-43.552c56.768-63.856 88.32-143.952 90.128-230.416l0.08-7.888C864 302.512 692.864 137.008 483.648 144.224z",
     "p-id": "7903"

package/es/components/icons/up-icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare const UpIcon: React.NamedExoticComponent<NativeProps>;
+export default UpIcon;

package/es/components/icons/up-icon.js

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+var UpIcon = memo(function (props) {
+  return withNativeProps(props, React.createElement("svg", {
+    className: "ebscn-ui-icon",
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "3450",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, React.createElement("path", {
+    d: "M902.608 665.344a32 32 0 1 1-45.216 45.312l-335.136-334.4a15.6 15.6 0 0 0-22.064 0.032L166.656 710.608a32 32 0 1 1-45.312-45.216l333.552-334.304a79.6 79.6 0 0 1 112.56-0.128l335.152 334.4z",
+    "p-id": "3451"
+  })));
+});
+export default UpIcon;

package/es/components/icons/warning-icon.js

@@ -8,7 +8,8 @@ var WarningIcon = memo(function (props) {
     xmlns: "http://www.w3.org/2000/svg",
     "p-id": "2315",
     width: "1em",
-    height: "1em"
+    height: "1em",
+    fill: 'currentColor'
   }, React.createElement("path", {
     d: "M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m0 640a48 48 0 1 0 0 96 48 48 0 0 0 0-96z m0-480a40 40 0 0 0-40 40v336a40 40 0 1 0 80 0v-336A40 40 0 0 0 512 224z",
     "p-id": "2316"

package/es/components/infinite-scroll/index.d.ts

@@ -0,0 +1,4 @@
+import './infinite-scroll.less';
+import { InfiniteScroll } from './infinite-scroll';
+export type { InfiniteScrollProps } from './infinite-scroll';
+export default InfiniteScroll;

package/es/components/infinite-scroll/index.js

@@ -0,0 +1,3 @@
+import "./infinite-scroll.css";
+import { InfiniteScroll } from './infinite-scroll';
+export default InfiniteScroll;

package/es/components/infinite-scroll/infinite-scroll.css

@@ -0,0 +1,27 @@
+.ebscn-infinite-scroll {
+  color: #666;
+  color: var(--ebscn-color-text);
+  padding: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--ebscn-font-size-5);
+}
+.ebscn-infinite-scroll-failed-text {
+  color: var(--ebscn-color-text);
+  display: inline-block;
+  margin-right: 8px;
+}
+.ebscn-infinite-scroll-loading-wrap {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 13px;
+}
+.ebscn-infinite-scroll-loading-img {
+  width: 18px;
+  height: 18px;
+}
+.ebscn-infinite-scroll-nodata-text {
+  color: var(--ebscn-color-weak);
+}

package/es/components/infinite-scroll/infinite-scroll.d.ts

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type InfiniteScrollProps = {
+    loadMore: (isRetry: boolean) => Promise<void>;
+    hasMore: boolean;
+    threshold?: number;
+    NoMoreContent?: ReactNode;
+    FailContent?: ReactNode;
+    children?: ReactNode | ((hasMore: boolean, failed: boolean, retry: () => void, NoMoreContent?: ReactNode, FailContent?: ReactNode) => ReactNode);
+} & NativeProps;
+export declare const InfiniteScroll: FC<InfiniteScrollProps>;