@hanwenbo/x-web-pro-components 0.0.2 → 0.0.4

package/lib/components/table/index.js

@@ -155,6 +155,8 @@ var _checkbox = require("@hanwenbo/x-web-ui/checkbox");
 var _dropdown = require("@hanwenbo/x-web-ui/dropdown");
 var _form = require("@hanwenbo/x-web-ui/form");
 var _pagination = require("@hanwenbo/x-web-ui/pagination");
+var _select = require("@hanwenbo/x-web-ui/select");
+var _i18n = require("@hanwenbo/x-web-ui/i18n");
 var _table = require("@hanwenbo/x-web-ui/table");
 var _tooltip = require("@hanwenbo/x-web-ui/tooltip");
 var _cn = require("@hanwenbo/x-web-ui/utils/cn");
@@ -452,6 +454,10 @@ var BaseProTable = function BaseProTable(_ref3) {
   var _useForm = (0, _form.useForm)(),
     _useForm2 = _slicedToArray(_useForm, 1),
     searchForm = _useForm2[0];
+  var _useLocale = (0, _i18n.useLocale)(),
+    t = _useLocale.t;
+  var intl = (0, _provider.useIntl)();
+  var itemsPerPageLabel = t('common.itemsPerPage') !== 'common.itemsPerPage' ? t('common.itemsPerPage') : String(_i18n.zhCN['common.itemsPerPage']);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     requestLoading = _useState2[0],
@@ -836,7 +842,7 @@ var BaseProTable = function BaseProTable(_ref3) {
               setColumnVisibility(columnKey, checked);
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "truncate text-sm text-foreground",
+              className: "text-foreground truncate text-sm",
               children: columnTitle
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -844,7 +850,7 @@ var BaseProTable = function BaseProTable(_ref3) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "flex items-center gap-1",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
-                title: fixed === 'left' ? '取消左侧固定' : '固定到左侧',
+                title: intl.getMessage(fixed === 'left' ? 'tableToolbar.unpinLeft' : 'tableToolbar.pinLeft'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "inline-flex",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.Button, {
@@ -857,18 +863,18 @@ var BaseProTable = function BaseProTable(_ref3) {
                       event.stopPropagation();
                       toggleColumnFixed(columnKey, 'left');
                     },
-                    "aria-label": fixed === 'left' ? '取消左侧固定' : '固定到左侧',
+                    "aria-label": intl.getMessage(fixed === 'left' ? 'tableToolbar.unpinLeft' : 'tableToolbar.pinLeft'),
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReact.PanelLeft, {
                       size: 16,
                       className: "shrink-0"
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                       className: "sr-only",
-                      children: fixed === 'left' ? '取消左侧固定' : '固定到左侧'
+                      children: intl.getMessage(fixed === 'left' ? 'tableToolbar.unpinLeft' : 'tableToolbar.pinLeft')
                     })]
                   })
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
-                title: fixed === 'right' ? '取消右侧固定' : '固定到右侧',
+                title: intl.getMessage(fixed === 'right' ? 'tableToolbar.unpinRight' : 'tableToolbar.pinRight'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "inline-flex",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.Button, {
@@ -881,13 +887,13 @@ var BaseProTable = function BaseProTable(_ref3) {
                       event.stopPropagation();
                       toggleColumnFixed(columnKey, 'right');
                     },
-                    "aria-label": fixed === 'right' ? '取消右侧固定' : '固定到右侧',
+                    "aria-label": intl.getMessage(fixed === 'right' ? 'tableToolbar.unpinRight' : 'tableToolbar.pinRight'),
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReact.PanelRight, {
                       size: 16,
                       className: "shrink-0"
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                       className: "sr-only",
-                      children: fixed === 'right' ? '取消右侧固定' : '固定到右侧'
+                      children: intl.getMessage(fixed === 'right' ? 'tableToolbar.unpinRight' : 'tableToolbar.pinRight')
                     })]
                   })
                 })
@@ -926,17 +932,17 @@ var BaseProTable = function BaseProTable(_ref3) {
           disabled: true,
           label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "x-pro-table-options-dropdown-section-label",
-            children: "\u5BC6\u5EA6"
+            children: intl.getMessage('tableToolbar.density')
           })
         }, {
           key: 'density-large',
-          label: '宽松'
+          label: intl.getMessage('tableToolbar.large')
         }, {
           key: 'density-middle',
-          label: '中等'
+          label: intl.getMessage('tableToolbar.middle')
         }, {
           key: 'density-small',
-          label: '紧凑'
+          label: intl.getMessage('tableToolbar.small')
         });
       }
       if (optionConfig.setting && columnSettingItems.length > 0) {
@@ -951,7 +957,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           disabled: true,
           label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "x-pro-table-options-dropdown-section-label",
-            children: "\u5217\u8BBE\u7F6E"
+            children: intl.getMessage('tableToolbar.columns')
           })
         });
         dropdownItems.push.apply(dropdownItems, _toConsumableArray(columnSettingItems));
@@ -965,7 +971,7 @@ var BaseProTable = function BaseProTable(_ref3) {
         }
         dropdownItems.push({
           key: 'fullscreen',
-          label: fullscreen ? '退出全屏' : '全屏'
+          label: intl.getMessage(fullscreen ? 'tableToolbar.exitFullscreen' : 'tableToolbar.fullscreen')
         });
       }
       if (!optionConfig.reload && dropdownItems.length === 0) {
@@ -981,7 +987,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           onClick: function onClick() {
             action.reload();
           },
-          children: (_optionConfig$dropdow = optionConfig.dropdownText) !== null && _optionConfig$dropdow !== void 0 ? _optionConfig$dropdow : '刷新'
+          children: (_optionConfig$dropdow = optionConfig.dropdownText) !== null && _optionConfig$dropdow !== void 0 ? _optionConfig$dropdow : intl.getMessage('tableToolbar.reload')
         }) : null, dropdownItems.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.Dropdown, {
           placement: "bottomRight",
           dropdownClassName: "x-pro-table-options-dropdown-menu",
@@ -1018,14 +1024,14 @@ var BaseProTable = function BaseProTable(_ref3) {
               className: "x-pro-table-options-dropdown-icon"
             }),
             className: "x-pro-table-options-dropdown-trigger",
-            "aria-label": "\u6253\u5F00\u8868\u683C\u5DE5\u5177"
+            "aria-label": intl.getMessage('tableToolbar.tools')
           })
         }) : null]
       }, "toolbar-options-split")];
     }
     if (optionConfig.reload) {
       nextSettings.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
-        title: "\u5237\u65B0",
+        title: intl.getMessage('tableToolbar.reload'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "inline-flex",
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.Button, {
@@ -1039,7 +1045,7 @@ var BaseProTable = function BaseProTable(_ref3) {
               className: "h-4 w-4"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "sr-only",
-              children: "\u5237\u65B0"
+              children: intl.getMessage('tableToolbar.reload')
             })]
           }, "toolbar-reload")
         })
@@ -1050,13 +1056,13 @@ var BaseProTable = function BaseProTable(_ref3) {
         menu: {
           items: [{
             key: 'large',
-            label: '宽松'
+            label: intl.getMessage('tableToolbar.large')
           }, {
             key: 'middle',
-            label: '中等'
+            label: intl.getMessage('tableToolbar.middle')
           }, {
             key: 'small',
-            label: '紧凑'
+            label: intl.getMessage('tableToolbar.small')
           }],
           onClick: function onClick(item) {
             var nextSize = mapTableSize(item.key);
@@ -1066,7 +1072,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           selectedKeys: [tableSize]
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
-          title: "\u5BC6\u5EA6",
+          title: intl.getMessage('tableToolbar.density'),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "inline-flex",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.Button, {
@@ -1077,7 +1083,7 @@ var BaseProTable = function BaseProTable(_ref3) {
                 className: "h-4 w-4"
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "sr-only",
-                children: "\u5BC6\u5EA6"
+                children: intl.getMessage('tableToolbar.density')
               })]
             })
           })
@@ -1095,7 +1101,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           onClick: function onClick() {}
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
-          title: "\u5217\u8BBE\u7F6E",
+          title: intl.getMessage('tableToolbar.columns'),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "inline-flex",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.Button, {
@@ -1106,7 +1112,7 @@ var BaseProTable = function BaseProTable(_ref3) {
                 className: "h-4 w-4"
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "sr-only",
-                children: "\u5217\u8BBE\u7F6E"
+                children: intl.getMessage('tableToolbar.columns')
               })]
             })
           })
@@ -1115,7 +1121,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     }
     if (optionConfig.fullScreen) {
       nextSettings.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
-        title: fullscreen ? '退出全屏' : '全屏',
+        title: intl.getMessage(fullscreen ? 'tableToolbar.exitFullscreen' : 'tableToolbar.fullscreen'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "inline-flex",
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.Button, {
@@ -1132,14 +1138,14 @@ var BaseProTable = function BaseProTable(_ref3) {
               className: "h-4 w-4"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "sr-only",
-              children: fullscreen ? '退出全屏' : '全屏'
+              children: intl.getMessage(fullscreen ? 'tableToolbar.exitFullscreen' : 'tableToolbar.fullscreen')
             })]
           }, "toolbar-fullscreen")
         })
       }, "toolbar-fullscreen-tooltip"));
     }
     return nextSettings;
-  }, [action, columns, fullscreen, mergedColumnsState, onSizeChange, optionConfig, setColumnVisibility, tableSize, toggleColumnFixed]);
+  }, [action, intl, columns, fullscreen, mergedColumnsState, onSizeChange, optionConfig, setColumnVisibility, tableSize, toggleColumnFixed]);
   var mergedRowSelection = (0, _react.useMemo)(function () {
     if (!rowSelection) {
       return undefined;
@@ -1164,7 +1170,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     }
     var searchConfig = toolSearchConfig === true ? {} : toolSearchConfig;
     return {
-      placeholder: searchConfig.placeholder || '请输入关键词',
+      placeholder: searchConfig.placeholder || intl.getMessage('tableToolbar.keyword'),
       allowClear: true,
       onSearch: function () {
         var _onSearch = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(keyword) {
@@ -1203,7 +1209,7 @@ var BaseProTable = function BaseProTable(_ref3) {
         return onSearch;
       }()
     };
-  }, [optionConfig, toolbar === null || toolbar === void 0 ? void 0 : toolbar.search]);
+  }, [intl, optionConfig, toolbar === null || toolbar === void 0 ? void 0 : toolbar.search]);
   var toolbarOptionNodes = (0, _react.useMemo)(function () {
     if (optionsRender === false) {
       return [];
@@ -1299,7 +1305,7 @@ var BaseProTable = function BaseProTable(_ref3) {
             mode: "edit",
             valueType: searchValueType,
             valueEnum: columnItem.valueEnum,
-            placeholder: typeof columnItem.title === 'string' ? ['select', 'tag', 'treeSelect', 'cascader', 'segmented', 'date', 'dateMonth', 'dateQuarter', 'dateTime', 'dateRange', 'dateMonthRange', 'dateQuarterRange', 'dateTimeRange', 'dateWeek', 'dateWeekRange', 'dateYear', 'dateYearRange', 'time', 'timeRange'].includes(valueTypeName) ? "\u8BF7\u9009\u62E9".concat(columnItem.title) : "\u8BF7\u8F93\u5165".concat(columnItem.title) : undefined,
+            placeholder: typeof columnItem.title === 'string' ? ['select', 'tag', 'treeSelect', 'cascader', 'segmented', 'date', 'dateMonth', 'dateQuarter', 'dateTime', 'dateRange', 'dateMonthRange', 'dateQuarterRange', 'dateTimeRange', 'dateWeek', 'dateWeekRange', 'dateYear', 'dateYearRange', 'time', 'timeRange'].includes(valueTypeName) ? "".concat(intl.getMessage('form.selectPrefix')).concat(columnItem.title) : "".concat(intl.getMessage('form.inputPrefix')).concat(columnItem.title) : undefined,
             fieldProps: _objectSpread(_objectSpread({}, resolvedFieldProps || {}), {}, {
               className: (0, _cn.cn)(stableChoiceWidth && 'min-w-0 w-full', resolvedFieldProps === null || resolvedFieldProps === void 0 ? void 0 : resolvedFieldProps.className),
               style: _objectSpread(_objectSpread({}, stableChoiceWidth ? {
@@ -1349,7 +1355,7 @@ var BaseProTable = function BaseProTable(_ref3) {
       className: className
     }, tableProps), defaultSearchNode)) : defaultSearchNode;
     return rendered === null ? null : rendered;
-  }, [action, className, columns, controlledDataSource, controlledLoading, columnsState, headerTitle, _onChange3, onDataSourceChange, onLoad, onLoadingChange, onRequestError, onSizeChange, options, optionsRender, params, pagination, request, resolveSearchValues, rowSelection, search, searchColumns, searchForm, searchFormRender, hasSearchForm, tableAlertOptionRender, tableAlertRender, tableClassName, tableExtraRender, tableProps, tableStyle, toolbar, toolBarRender]);
+  }, [action, className, intl, columns, controlledDataSource, controlledLoading, columnsState, headerTitle, _onChange3, onDataSourceChange, onLoad, onLoadingChange, onRequestError, onSizeChange, options, optionsRender, params, pagination, request, resolveSearchValues, rowSelection, search, searchColumns, searchForm, searchFormRender, hasSearchForm, tableAlertOptionRender, tableAlertRender, tableClassName, tableExtraRender, tableProps, tableStyle, toolbar, toolBarRender]);
 
   // ProTable 为了保持 hooks 顺序会始终创建 searchForm；没有搜索字段时仍需让
   // rc-field-form 连接到一个 Form，否则它会在开发环境延迟输出未连接告警。
@@ -1375,7 +1381,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     var messageNode = tableAlertRender ? tableAlertRender({
       selectedRowKeys: selectedRowKeys,
       selectedRows: selectedRows
-    }) : selectedCount ? "\u5DF2\u9009 ".concat(selectedCount) : null;
+    }) : selectedCount ? "".concat(intl.getMessage('tableToolbar.selected'), " ").concat(selectedCount) : null;
     if (!messageNode) {
       return null;
     }
@@ -1388,7 +1394,7 @@ var BaseProTable = function BaseProTable(_ref3) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "flex items-center gap-2 text-sm text-foreground",
+          className: "text-foreground flex items-center gap-2 text-sm",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "text-primary",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
@@ -1421,12 +1427,12 @@ var BaseProTable = function BaseProTable(_ref3) {
             size: "small",
             variant: "ghost",
             onClick: clearSelectionState,
-            children: "\u6E05\u7A7A"
+            children: intl.getMessage('tableToolbar.clear')
           }) : null)
         })]
       })
     });
-  }, [clearSelectionState, hasCustomToolbarActions, mergedRowSelection, selectedRows, mergedSelectedRowKeys, tableAlertOptionRender, tableAlertRender]);
+  }, [clearSelectionState, intl, hasCustomToolbarActions, mergedRowSelection, selectedRows, mergedSelectedRowKeys, tableAlertOptionRender, tableAlertRender]);
   var toolbarSectionNode = (0, _react.useMemo)(function () {
     if (!toolbarNode) {
       return null;
@@ -1441,7 +1447,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.Card, {
       variant: "default",
-      className: "overflow-visible rounded-xl border-0 bg-card shadow-none",
+      className: "bg-card overflow-visible rounded-xl border-0 shadow-none",
       bodyClassName: "px-4 py-4",
       children: searchNode
     });
@@ -1514,25 +1520,20 @@ var BaseProTable = function BaseProTable(_ref3) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _cn.cn)(PRO_TABLE_STACK_CLASS, 'w-full sm:flex-row sm:items-center sm:justify-between'),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "flex flex-wrap items-center text-sm text-muted-foreground [gap:var(--x-space-4)]",
-        children: [normalizedPaginationConfig.showTotal ? normalizedPaginationConfig.showTotal(total, range) : null, normalizedPaginationConfig.showSizeChanger ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-          className: "flex items-center gap-2",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "text-xs uppercase tracking-wide text-muted-foreground",
-            children: "Page Size"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
-            className: "h-9 rounded-lg border border-border bg-background px-3 text-sm text-foreground outline-none transition-colors focus:border-primary",
-            value: pageInfo.pageSize,
-            onChange: function onChange(event) {
-              void handleExternalPaginationChange(1, Number(event.target.value));
-            },
-            children: (normalizedPaginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(function (option) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("option", {
-                value: option,
-                children: [option, " / page"]
-              }, option);
-            })
-          })]
+        className: "text-muted-foreground flex flex-wrap items-center [gap:var(--x-space-4)] text-sm",
+        children: [normalizedPaginationConfig.showTotal ? normalizedPaginationConfig.showTotal(total, range) : null, normalizedPaginationConfig.showSizeChanger ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.Select, {
+          "aria-label": itemsPerPageLabel,
+          size: resolvedPaginationSize,
+          value: pageInfo.pageSize,
+          options: (normalizedPaginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(function (option) {
+            return {
+              value: option,
+              label: "".concat(option, " ").concat(itemsPerPageLabel)
+            };
+          }),
+          onChange: function onChange(value) {
+            void handleExternalPaginationChange(1, Number(value));
+          }
         }) : null]
       }), shouldRenderPager ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagination.Pagination, {
         current: pageInfo.current,
@@ -1545,7 +1546,7 @@ var BaseProTable = function BaseProTable(_ref3) {
         }
       }) : null]
     });
-  }, [dataSource.length, handleExternalPaginationChange, normalizedPaginationConfig, pageInfo.current, pageInfo.pageSize, pageInfo.total, resolvedPaginationSize, showExternalBottomPagination, tableSize]);
+  }, [itemsPerPageLabel, dataSource.length, handleExternalPaginationChange, normalizedPaginationConfig, pageInfo.current, pageInfo.pageSize, pageInfo.total, resolvedPaginationSize, showExternalBottomPagination, tableSize]);
   var defaultTableNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_table.Table, _objectSpread(_objectSpread({}, tableProps), {}, {
     className: (0, _cn.cn)(tableClassName),
     style: tableStyle,
@@ -1671,7 +1672,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     cardStyle = _ref10.style,
     restCardProps = _objectWithoutProperties(_ref10, _excluded2);
   var tableCardNode = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.Card, _objectSpread(_objectSpread({}, restCardProps), {}, {
-    className: (0, _cn.cn)('overflow-visible rounded-xl border-0 bg-card shadow-none', fullscreen && 'fixed inset-4 z-40 overflow-auto bg-background p-2 shadow-2xl', className, cardClassName),
+    className: (0, _cn.cn)('bg-card overflow-visible rounded-xl border-0 shadow-none', fullscreen && 'bg-background fixed inset-4 z-40 overflow-auto p-2 shadow-2xl', className, cardClassName),
     style: cardStyle,
     children: [searchFormConnectionNode, tableContent]
   }));

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.0.1";
+export declare const version = "0.0.4";
 export default version;

package/lib/version.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.default = void 0;
-var version = exports.version = '0.0.1';
+var version = exports.version = '0.0.4';
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanwenbo/x-web-pro-components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Enterprise-ready pro components built on x-web-ui",
   "author": "9476400@qq.com",
   "license": "MIT",
@@ -44,7 +44,7 @@
   "dependencies": {
     "dayjs": "^1.11.3",
     "lucide-react": "^0.460.0",
-    "@hanwenbo/x-web-ui": "0.0.2"
+    "@hanwenbo/x-web-ui": "0.0.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0",