@hsu-react/ui 0.0.21 → 0.0.23

package/es/components/Button/ChakraButton/index.js

@@ -12,6 +12,7 @@ import { Button } from "@chakra-ui/react";
 import usePermissions from "../../../hooks/usePermissions";
 import styles from "./index.module.scss";
 import classNames from "classnames";
+import ChakraRoot from "../../ChakraRoot";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,7 +33,23 @@ var ChakraButton = function ChakraButton(props) {
     return null;
   }
   if (reRender) {
-    return reRender( /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+    return /*#__PURE__*/_jsx(ChakraRoot, {
+      children: reRender( /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+        className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
+        children: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
+            className: styles.icon,
+            children: icon
+          }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
+            className: styles.icon,
+            children: icon
+          })]
+        })
+      })))
+    });
+  }
+  return /*#__PURE__*/_jsx(ChakraRoot, {
+    children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
       className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
       children: /*#__PURE__*/_jsxs(_Fragment, {
         children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
@@ -43,19 +60,7 @@ var ChakraButton = function ChakraButton(props) {
           children: icon
         })]
       })
-    })));
-  }
-  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
-    className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
-    children: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
-        className: styles.icon,
-        children: icon
-      }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
-        className: styles.icon,
-        children: icon
-      })]
-    })
-  }));
+    }))
+  });
 };
 export default ChakraButton;

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

@@ -1,6 +1,6 @@
 import { ButtonProps as AntdButtonProps } from "antd";
 import React from "react";
-import { ChakraButtonProps } from "./ChakraButton";
+import type { ChakraButtonProps } from "./ChakraButton";
 export type { ChakraButtonProps };
 export interface ButtonProps extends AntdButtonProps {
     hasPermi?: string[];

package/es/components/Button/index.js

@@ -1,19 +1,33 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["hasPermi", "hidden", "iconPosition", "className", "children", "title"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Button as AntdButton } from "antd";
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import ChakraButton from "./ChakraButton";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
+ * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
+ * on-demand loading: the type goes through `import type` (erased at compile time), and the
+ * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ */
+var InternalChakraButton = /*#__PURE__*/lazy(function () {
+  return import("./ChakraButton");
+});
+var ChakraButton = function ChakraButton(props) {
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: null,
+    children: /*#__PURE__*/_jsx(InternalChakraButton, _objectSpread({}, props))
+  });
+};
 // forwardRef: when wrapped by overlay components like Tooltip / Popconfirm, the button DOM can be accessed directly,
 // preventing rc libraries from falling back to findDOMNode and triggering React deprecation warnings
 var InternalButton = /*#__PURE__*/React.forwardRef(function (props, ref) {

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

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ChakraRootProps {
+    children?: React.ReactNode;
+}
+declare const ChakraRoot: React.FC<ChakraRootProps>;
+export default ChakraRoot;

package/es/components/ChakraRoot/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+
+/**
+ * Provider shell for chakra.
+ *
+ * These two providers used to be mounted by the consumer at the application entry, wrapping
+ * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
+ * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
+ * that actually uses chakra.
+ *
+ * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
+ * so chakra travels with it), and the consumer entry no longer needs a global provider, which
+ * takes chakra out of the initial bundle entirely.
+ *
+ * Both system and cache are module-level singletons, so wrapping in several places does not
+ * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
+ * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
+ * priority than antd — matching the previous behaviour.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var cache = createCache({
+  key: "css",
+  prepend: true
+});
+var system = createSystem(defaultConfig, {
+  disableLayers: true,
+  preflight: false
+});
+var ChakraRoot = function ChakraRoot(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: cache,
+    children: /*#__PURE__*/_jsx(ChakraProvider, {
+      value: system,
+      children: children
+    })
+  });
+};
+export default ChakraRoot;

package/es/components/Select/IconSelect/index.js

@@ -1,4 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -14,28 +16,45 @@ import Icon from "../../Icon";
 import Input from "../../Input";
 import styles from "./index.module.scss";
 import classNames from "classnames";
-import antDesignIcons from "@iconify/json/json/ant-design.json";
-import elementPlusIcons from "@iconify/json/json/ep.json";
-import fontAwesome4Icons from "@iconify/json/json/fa.json";
-import fontAwesome5SolidIcons from "@iconify/json/json/fa-solid.json";
+
+/**
+ * The four selectable icon sets are loaded on demand.
+ *
+ * Together these JSON files weigh about 1.9 MB, and a static import drags them into the
+ * initial bundle along with IconSelect:
+ *
+ *   FormItem → FormSelect → IconSelect → @iconify/json/json/*.json
+ *
+ * Only pages like menu management ever actually open the icon picker, so the set metadata
+ * and the icon-name list are split apart: label / name stay static (the Tabs must render
+ * immediately), and the matching set is fetched for the current tab once the popover opens.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var icons = [{
+var ICON_SETS = [{
   label: "Ant Design",
   name: "ant-design",
-  icons: Object.keys(antDesignIcons.icons)
+  load: function load() {
+    return import("@iconify/json/json/ant-design.json");
+  }
 }, {
   label: "Element Plus",
   name: "ep",
-  icons: Object.keys(elementPlusIcons.icons)
+  load: function load() {
+    return import("@iconify/json/json/ep.json");
+  }
 }, {
   label: "Font Awesome 4",
   name: "fa",
-  icons: Object.keys(fontAwesome4Icons.icons)
+  load: function load() {
+    return import("@iconify/json/json/fa.json");
+  }
 }, {
   label: "Font Awesome 5 Solid",
   name: "fa-solid",
-  icons: Object.keys(fontAwesome5SolidIcons.icons)
+  load: function load() {
+    return import("@iconify/json/json/fa-solid.json");
+  }
 }];
 var IconSelect = function IconSelect(props) {
   var _props$value = props.value,
@@ -58,13 +77,22 @@ var IconSelect = function IconSelect(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     activeIcon = _useState8[0],
     setActiveIcon = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    open = _useState10[0],
+    setOpen = _useState10[1];
+  /** Loaded icon-name lists, cached by set name */
+  var _useState11 = useState({}),
+    _useState12 = _slicedToArray(_useState11, 2),
+    iconNames = _useState12[0],
+    setIconNames = _useState12[1];
   useEffect(function () {
-    setCurrentTab(icons[0].name);
+    setCurrentTab(ICON_SETS[0].name);
   }, []);
   useEffect(function () {
     if (value && value !== _value) {
       setValue(value);
-      if (icons.find(function (item) {
+      if (ICON_SETS.find(function (item) {
         return item.name === value.split(":")[0];
       })) {
         setCurrentTab(value.split(":")[0]);
@@ -72,6 +100,28 @@ var IconSelect = function IconSelect(props) {
       }
     }
   }, [value, _value]);
+
+  // Only fetch the current tab's icon names once the popover is open, and only once per set
+  useEffect(function () {
+    if (!open || !currentTab || iconNames[currentTab]) return;
+    var target = ICON_SETS.find(function (item) {
+      return item.name === currentTab;
+    });
+    if (!target) return;
+    var alive = true;
+    target.load().then(function (module) {
+      var _default;
+      if (!alive) return;
+      var json = (_default = module.default) !== null && _default !== void 0 ? _default : module;
+      setIconNames(function (prev) {
+        var _json$icons;
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, currentTab, Object.keys((_json$icons = json.icons) !== null && _json$icons !== void 0 ? _json$icons : {})));
+      });
+    });
+    return function () {
+      alive = false;
+    };
+  }, [open, currentTab, iconNames]);
   var _onChange = function _onChange(value) {
     setValue(value);
     onChange === null || onChange === void 0 || onChange(value);
@@ -85,6 +135,8 @@ var IconSelect = function IconSelect(props) {
       placement: "bottom",
       trigger: "click",
       zIndex: 1000,
+      open: open,
+      onOpenChange: setOpen,
       content: /*#__PURE__*/_jsxs("div", {
         className: styles.popoverContent,
         children: [/*#__PURE__*/_jsx(Input, {
@@ -100,16 +152,16 @@ var IconSelect = function IconSelect(props) {
           onChange: function onChange(key) {
             setCurrentTab(key);
           },
-          items: icons === null || icons === void 0 ? void 0 : icons.map(function (type) {
-            var _type$icons;
+          items: ICON_SETS.map(function (type) {
+            var _iconNames$type$name;
             return {
               label: type.label,
               key: type.name,
               children: /*#__PURE__*/_jsx("div", {
                 className: classNames(styles.typeIcon),
-                children: (_type$icons = type.icons) === null || _type$icons === void 0 || (_type$icons = _type$icons.filter(function (i) {
+                children: ((_iconNames$type$name = iconNames[type.name]) !== null && _iconNames$type$name !== void 0 ? _iconNames$type$name : []).filter(function (i) {
                   return i.includes(search);
-                })) === null || _type$icons === void 0 ? void 0 : _type$icons.map(function (item) {
+                }).map(function (item) {
                   return /*#__PURE__*/_jsx(Tooltip, {
                     title: type.name + ":" + item,
                     placement: "top",

package/es/index.d.ts

@@ -10,6 +10,8 @@ export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as ChainGraph } from "./components/ChainGraph";
 export * from "./components/ChainGraph";
+export { default as ChakraRoot } from "./components/ChakraRoot";
+export * from "./components/ChakraRoot";
 export { default as Chart } from "./components/Chart";
 export * from "./components/Chart";
 export { default as Chat } from "./components/Chat";

package/es/index.js

@@ -13,6 +13,8 @@ export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as ChainGraph } from "./components/ChainGraph";
 export * from "./components/ChainGraph";
+export { default as ChakraRoot } from "./components/ChakraRoot";
+export * from "./components/ChakraRoot";
 export { default as Chart } from "./components/Chart";
 export * from "./components/Chart";
 export { default as Chat } from "./components/Chat";

package/lib/components/Button/ChakraButton/index.js

@@ -9,6 +9,7 @@ var _react2 = require("@chakra-ui/react");
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _ChakraRoot = _interopRequireDefault(require("../../ChakraRoot"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ChakraButton = props => {
@@ -30,7 +31,26 @@ const ChakraButton = props => {
     return null;
   }
   if (reRender) {
-    return reRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChakraRoot.default, {
+      children: reRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
+        ...buttonConfig,
+        className: (0, _classnames.default)(className, _indexModule.default.button, {
+          [_indexModule.default[iconPosition]]: iconPosition
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [iconPosition === "start" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: _indexModule.default.icon,
+            children: icon
+          }), children ?? title, iconPosition === "end" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: _indexModule.default.icon,
+            children: icon
+          })]
+        })
+      }))
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChakraRoot.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
       ...buttonConfig,
       className: (0, _classnames.default)(className, _indexModule.default.button, {
         [_indexModule.default[iconPosition]]: iconPosition
@@ -44,21 +64,6 @@ const ChakraButton = props => {
           children: icon
         })]
       })
-    }));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
-    ...buttonConfig,
-    className: (0, _classnames.default)(className, _indexModule.default.button, {
-      [_indexModule.default[iconPosition]]: iconPosition
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [iconPosition === "start" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: _indexModule.default.icon,
-        children: icon
-      }), children ?? title, iconPosition === "end" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: _indexModule.default.icon,
-        children: icon
-      })]
     })
   });
 };

package/lib/components/Button/index.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps as AntdButtonProps } from "antd";
 import React from "react";
-import { ChakraButtonProps } from "./ChakraButton";
+import type { ChakraButtonProps } from "./ChakraButton";
 export type { ChakraButtonProps };
 export interface ButtonProps extends AntdButtonProps {
     hasPermi?: string[];

package/lib/components/Button/index.js

@@ -5,13 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _antd = require("antd");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _usePermissions = _interopRequireDefault(require("../../hooks/usePermissions"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-var _ChakraButton = _interopRequireDefault(require("./ChakraButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
+ * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
+ * on-demand loading: the type goes through `import type` (erased at compile time), and the
+ * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ */
+const InternalChakraButton = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./ChakraButton"))));
+const ChakraButton = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: null,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalChakraButton, {
+    ...props
+  })
+});
 // forwardRef: when wrapped by overlay components like Tooltip / Popconfirm, the button DOM can be accessed directly,
 // preventing rc libraries from falling back to findDOMNode and triggering React deprecation warnings
 const InternalButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
@@ -40,5 +54,5 @@ const InternalButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   });
 });
 const Button = InternalButton;
-Button.Chakra = _ChakraButton.default;
+Button.Chakra = ChakraButton;
 var _default = exports.default = Button;

package/lib/components/ChakraRoot/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ChakraRootProps {
+    children?: React.ReactNode;
+}
+declare const ChakraRoot: React.FC<ChakraRootProps>;
+export default ChakraRoot;

package/lib/components/ChakraRoot/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+var _react3 = require("@emotion/react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Provider shell for chakra.
+ *
+ * These two providers used to be mounted by the consumer at the application entry, wrapping
+ * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
+ * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
+ * that actually uses chakra.
+ *
+ * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
+ * so chakra travels with it), and the consumer entry no longer needs a global provider, which
+ * takes chakra out of the initial bundle entirely.
+ *
+ * Both system and cache are module-level singletons, so wrapping in several places does not
+ * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
+ * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
+ * priority than antd — matching the previous behaviour.
+ */const cache = (0, _cache.default)({
+  key: "css",
+  prepend: true
+});
+const system = (0, _react2.createSystem)(_react2.defaultConfig, {
+  disableLayers: true,
+  preflight: false
+});
+const ChakraRoot = ({
+  children
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react3.CacheProvider, {
+  value: cache,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ChakraProvider, {
+    value: system,
+    children: children
+  })
+});
+var _default = exports.default = ChakraRoot;

package/lib/components/Select/IconSelect/index.js

@@ -10,30 +10,37 @@ var _Icon = _interopRequireDefault(require("../../Icon"));
 var _Input = _interopRequireDefault(require("../../Input"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _antDesign = _interopRequireDefault(require("@iconify/json/json/ant-design.json"));
-var _ep = _interopRequireDefault(require("@iconify/json/json/ep.json"));
-var _fa = _interopRequireDefault(require("@iconify/json/json/fa.json"));
-var _faSolid = _interopRequireDefault(require("@iconify/json/json/fa-solid.json"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const icons = [{
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /**
+ * The four selectable icon sets are loaded on demand.
+ *
+ * Together these JSON files weigh about 1.9 MB, and a static import drags them into the
+ * initial bundle along with IconSelect:
+ *
+ *   FormItem → FormSelect → IconSelect → @iconify/json/json/*.json
+ *
+ * Only pages like menu management ever actually open the icon picker, so the set metadata
+ * and the icon-name list are split apart: label / name stay static (the Tabs must render
+ * immediately), and the matching set is fetched for the current tab once the popover opens.
+ */
+const ICON_SETS = [{
   label: "Ant Design",
   name: "ant-design",
-  icons: Object.keys(_antDesign.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/ant-design.json")))
 }, {
   label: "Element Plus",
   name: "ep",
-  icons: Object.keys(_ep.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/ep.json")))
 }, {
   label: "Font Awesome 4",
   name: "fa",
-  icons: Object.keys(_fa.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/fa.json")))
 }, {
   label: "Font Awesome 5 Solid",
   name: "fa-solid",
-  icons: Object.keys(_faSolid.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/fa-solid.json")))
 }];
 const IconSelect = props => {
   const {
@@ -45,18 +52,40 @@ const IconSelect = props => {
   const [search, setSearch] = (0, _react.useState)("");
   const [currentTab, setCurrentTab] = (0, _react.useState)("");
   const [activeIcon, setActiveIcon] = (0, _react.useState)("");
+  const [open, setOpen] = (0, _react.useState)(false);
+  /** Loaded icon-name lists, cached by set name */
+  const [iconNames, setIconNames] = (0, _react.useState)({});
   (0, _react.useEffect)(() => {
-    setCurrentTab(icons[0].name);
+    setCurrentTab(ICON_SETS[0].name);
   }, []);
   (0, _react.useEffect)(() => {
     if (value && value !== _value) {
       setValue(value);
-      if (icons.find(item => item.name === value.split(":")[0])) {
+      if (ICON_SETS.find(item => item.name === value.split(":")[0])) {
         setCurrentTab(value.split(":")[0]);
         setActiveIcon(value);
       }
     }
   }, [value, _value]);
+
+  // Only fetch the current tab's icon names once the popover is open, and only once per set
+  (0, _react.useEffect)(() => {
+    if (!open || !currentTab || iconNames[currentTab]) return;
+    const target = ICON_SETS.find(item => item.name === currentTab);
+    if (!target) return;
+    let alive = true;
+    target.load().then(module => {
+      if (!alive) return;
+      const json = module.default ?? module;
+      setIconNames(prev => ({
+        ...prev,
+        [currentTab]: Object.keys(json.icons ?? {})
+      }));
+    });
+    return () => {
+      alive = false;
+    };
+  }, [open, currentTab, iconNames]);
   const _onChange = value => {
     setValue(value);
     onChange?.(value);
@@ -70,6 +99,8 @@ const IconSelect = props => {
       placement: "bottom",
       trigger: "click",
       zIndex: 1000,
+      open: open,
+      onOpenChange: setOpen,
       content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _indexModule.default.popoverContent,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
@@ -85,12 +116,12 @@ const IconSelect = props => {
           onChange: key => {
             setCurrentTab(key);
           },
-          items: icons?.map(type => ({
+          items: ICON_SETS.map(type => ({
             label: type.label,
             key: type.name,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: (0, _classnames.default)(_indexModule.default.typeIcon),
-              children: type.icons?.filter(i => i.includes(search))?.map(item => {
+              children: (iconNames[type.name] ?? []).filter(i => i.includes(search)).map(item => {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
                   title: type.name + ":" + item,
                   placement: "top",

package/lib/index.d.ts

@@ -10,6 +10,8 @@ export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as ChainGraph } from "./components/ChainGraph";
 export * from "./components/ChainGraph";
+export { default as ChakraRoot } from "./components/ChakraRoot";
+export * from "./components/ChakraRoot";
 export { default as Chart } from "./components/Chart";
 export * from "./components/Chart";
 export { default as Chat } from "./components/Chat";

package/lib/index.js

@@ -21,6 +21,7 @@ var _exportNames = {
   defaultPrimaryColor: true,
   Button: true,
   ChainGraph: true,
+  ChakraRoot: true,
   Chart: true,
   Chat: true,
   Checkbox: true,
@@ -65,6 +66,12 @@ Object.defineProperty(exports, "ChainGraph", {
     return _ChainGraph.default;
   }
 });
+Object.defineProperty(exports, "ChakraRoot", {
+  enumerable: true,
+  get: function () {
+    return _ChakraRoot.default;
+  }
+});
 Object.defineProperty(exports, "Chart", {
   enumerable: true,
   get: function () {
@@ -370,6 +377,18 @@ Object.keys(_ChainGraph).forEach(function (key) {
     }
   });
 });
+var _ChakraRoot = _interopRequireWildcard(require("./components/ChakraRoot"));
+Object.keys(_ChakraRoot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChakraRoot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChakraRoot[key];
+    }
+  });
+});
 var _Chart = _interopRequireWildcard(require("./components/Chart"));
 Object.keys(_Chart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Button/ChakraButton/index.tsx

@@ -3,6 +3,7 @@ import { Button, ButtonProps } from "@chakra-ui/react";
 import usePermissions from "../../../hooks/usePermissions";
 import styles from "./index.module.scss";
 import classNames from "classnames";
+import ChakraRoot from "../../ChakraRoot";
 
 export interface ChakraButtonProps extends ButtonProps {
   hasPermi?: string[];
@@ -31,7 +32,33 @@ const ChakraButton: React.FC<ChakraButtonProps> = (props) => {
   }
 
   if (reRender) {
-    return reRender(
+    return (
+      <ChakraRoot>
+        {reRender(
+          <Button
+            {...buttonConfig}
+            className={classNames(className, styles.button, {
+              [styles[iconPosition]]: iconPosition,
+            })}
+            children={
+              <>
+                {iconPosition === "start" && icon && (
+                  <span className={styles.icon}>{icon}</span>
+                )}
+                {children ?? title}
+                {iconPosition === "end" && icon && (
+                  <span className={styles.icon}>{icon}</span>
+                )}
+              </>
+            }
+          />,
+        )}
+      </ChakraRoot>
+    );
+  }
+
+  return (
+    <ChakraRoot>
       <Button
         {...buttonConfig}
         className={classNames(className, styles.button, {
@@ -48,28 +75,8 @@ const ChakraButton: React.FC<ChakraButtonProps> = (props) => {
             )}
           </>
         }
-      />,
-    );
-  }
-
-  return (
-    <Button
-      {...buttonConfig}
-      className={classNames(className, styles.button, {
-        [styles[iconPosition]]: iconPosition,
-      })}
-      children={
-        <>
-          {iconPosition === "start" && icon && (
-            <span className={styles.icon}>{icon}</span>
-          )}
-          {children ?? title}
-          {iconPosition === "end" && icon && (
-            <span className={styles.icon}>{icon}</span>
-          )}
-        </>
-      }
-    />
+      />
+    </ChakraRoot>
   );
 };
 

package/src/components/Button/index.md

@@ -37,7 +37,11 @@ export default () => (
 
 ## Chakra 按钮
 
-基于 Chakra UI 的按钮，支持 `hasPermi`、`hidden`、`iconPosition`、`icon` 等扩展属性（Chakra system 由文档站全局提供）。
+基于 Chakra UI 的按钮，支持 `hasPermi`、`hidden`、`iconPosition`、`icon` 等扩展属性。
+
+Chakra 的 system 与 emotion cache 由组件**自带**（内部包了一层 `ChakraRoot`），消费方**不需要**在应用入口挂全局 `ChakraProvider` / `CacheProvider`。这样 `@chakra-ui/react` + `@emotion/*` + zag-js（合计约 570 KB）只存在于 `Button.Chakra` 的异步 chunk 里，不进首屏。
+
+> 从 `0.0.23` 起：入口若仍留着全局 Provider，不会出错，但那 570 KB 会照旧留在首屏——要拿到收益需把它删掉。若页面要**直接**使用 chakra 组件（不经 `Button.Chakra`），用库导出的 `ChakraRoot` 自行包一层即可。
 
 ```tsx
 import React from "react";

package/src/components/Button/index.tsx

@@ -1,13 +1,27 @@
 import { Button as AntdButton, ButtonProps as AntdButtonProps } from "antd";
 
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import ChakraButton, { ChakraButtonProps } from "./ChakraButton";
+import type { ChakraButtonProps } from "./ChakraButton";
 
 export type { ChakraButtonProps };
 
+/**
+ * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
+ * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
+ * on-demand loading: the type goes through `import type` (erased at compile time), and the
+ * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ */
+const InternalChakraButton = lazy(() => import("./ChakraButton"));
+
+const ChakraButton: React.FC<ChakraButtonProps> = (props) => (
+  <Suspense fallback={null}>
+    <InternalChakraButton {...props} />
+  </Suspense>
+);
+
 export interface ButtonProps extends AntdButtonProps {
   hasPermi?: string[];
   hidden?: boolean;

package/src/components/ChakraRoot/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+
+/**
+ * Provider shell for chakra.
+ *
+ * These two providers used to be mounted by the consumer at the application entry, wrapping
+ * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
+ * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
+ * that actually uses chakra.
+ *
+ * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
+ * so chakra travels with it), and the consumer entry no longer needs a global provider, which
+ * takes chakra out of the initial bundle entirely.
+ *
+ * Both system and cache are module-level singletons, so wrapping in several places does not
+ * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
+ * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
+ * priority than antd — matching the previous behaviour.
+ */
+const cache = createCache({
+  key: "css",
+  prepend: true,
+});
+
+const system = createSystem(defaultConfig, {
+  disableLayers: true,
+  preflight: false,
+});
+
+export interface ChakraRootProps {
+  children?: React.ReactNode;
+}
+
+const ChakraRoot: React.FC<ChakraRootProps> = ({ children }) => (
+  <CacheProvider value={cache}>
+    <ChakraProvider value={system}>{children}</ChakraProvider>
+  </CacheProvider>
+);
+
+export default ChakraRoot;

package/src/components/Select/IconSelect/index.tsx

@@ -6,35 +6,42 @@ import Input from "../../Input";
 import styles from "./index.module.scss";
 import classNames from "classnames";
 
-import antDesignIcons from "@iconify/json/json/ant-design.json";
-import elementPlusIcons from "@iconify/json/json/ep.json";
-import fontAwesome4Icons from "@iconify/json/json/fa.json";
-import fontAwesome5SolidIcons from "@iconify/json/json/fa-solid.json";
-
-const icons: Array<{
+/**
+ * The four selectable icon sets are loaded on demand.
+ *
+ * Together these JSON files weigh about 1.9 MB, and a static import drags them into the
+ * initial bundle along with IconSelect:
+ *
+ *   FormItem → FormSelect → IconSelect → @iconify/json/json/*.json
+ *
+ * Only pages like menu management ever actually open the icon picker, so the set metadata
+ * and the icon-name list are split apart: label / name stay static (the Tabs must render
+ * immediately), and the matching set is fetched for the current tab once the popover opens.
+ */
+const ICON_SETS: Array<{
   label: string;
   name: string;
-  icons: string[];
+  load: () => Promise<unknown>;
 }> = [
   {
     label: "Ant Design",
     name: "ant-design",
-    icons: Object.keys(antDesignIcons.icons),
+    load: () => import("@iconify/json/json/ant-design.json"),
   },
   {
     label: "Element Plus",
     name: "ep",
-    icons: Object.keys(elementPlusIcons.icons),
+    load: () => import("@iconify/json/json/ep.json"),
   },
   {
     label: "Font Awesome 4",
     name: "fa",
-    icons: Object.keys(fontAwesome4Icons.icons),
+    load: () => import("@iconify/json/json/fa.json"),
   },
   {
     label: "Font Awesome 5 Solid",
     name: "fa-solid",
-    icons: Object.keys(fontAwesome5SolidIcons.icons),
+    load: () => import("@iconify/json/json/fa-solid.json"),
   },
 ];
 
@@ -50,22 +57,51 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
   const [search, setSearch] = useState<string>("");
   const [currentTab, setCurrentTab] = useState<string>("");
   const [activeIcon, setActiveIcon] = useState<string>("");
+  const [open, setOpen] = useState<boolean>(false);
+  /** Loaded icon-name lists, cached by set name */
+  const [iconNames, setIconNames] = useState<Record<string, string[]>>({});
 
   useEffect(() => {
-    setCurrentTab(icons[0].name);
+    setCurrentTab(ICON_SETS[0].name);
   }, []);
 
   useEffect(() => {
     if (value && value !== _value) {
       setValue(value);
 
-      if (icons.find((item) => item.name === value.split(":")[0])) {
+      if (ICON_SETS.find((item) => item.name === value.split(":")[0])) {
         setCurrentTab(value.split(":")[0]);
         setActiveIcon(value);
       }
     }
   }, [value, _value]);
 
+  // Only fetch the current tab's icon names once the popover is open, and only once per set
+  useEffect(() => {
+    if (!open || !currentTab || iconNames[currentTab]) return;
+
+    const target = ICON_SETS.find((item) => item.name === currentTab);
+    if (!target) return;
+
+    let alive = true;
+    target.load().then((module) => {
+      if (!alive) return;
+
+      const json = ((module as { default?: unknown }).default ?? module) as {
+        icons: Record<string, unknown>;
+      };
+
+      setIconNames((prev) => ({
+        ...prev,
+        [currentTab]: Object.keys(json.icons ?? {}),
+      }));
+    });
+
+    return () => {
+      alive = false;
+    };
+  }, [open, currentTab, iconNames]);
+
   const _onChange = (value: string) => {
     setValue(value);
     onChange?.(value);
@@ -82,6 +118,8 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
           placement="bottom"
           trigger="click"
           zIndex={1000}
+          open={open}
+          onOpenChange={setOpen}
           content={
             <div className={styles.popoverContent}>
               <Input
@@ -96,14 +134,14 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
                 onChange={(key) => {
                   setCurrentTab(key);
                 }}
-                items={icons?.map((type) => ({
+                items={ICON_SETS.map((type) => ({
                   label: type.label,
                   key: type.name,
                   children: (
                     <div className={classNames(styles.typeIcon)}>
-                      {type.icons
-                        ?.filter((i) => i.includes(search))
-                        ?.map((item: string) => {
+                      {(iconNames[type.name] ?? [])
+                        .filter((i) => i.includes(search))
+                        .map((item: string) => {
                           return (
                             <Tooltip
                               key={item}

package/src/index.ts

@@ -25,6 +25,8 @@ export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as ChainGraph } from "./components/ChainGraph";
 export * from "./components/ChainGraph";
+export { default as ChakraRoot } from "./components/ChakraRoot";
+export * from "./components/ChakraRoot";
 export { default as Chart } from "./components/Chart";
 export * from "./components/Chart";
 export { default as Chat } from "./components/Chat";