@hsu-react/ui 1.0.0 → 2.0.1

package/es/feedback/index.js

@@ -0,0 +1,130 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useMemo } from "react";
+import { Modal as AntdModal, message as antdMessage, notification as antdNotification } from "antd";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 主题化的 message / notification / modal。
+ *
+ * 问题：antd 的 `message.success()`、`Modal.confirm()` 这类是命令式静态方法，调用时不在
+ * React 树里，读不到 `ConfigProvider` 注入的 `theme.token` —— 换过品牌色或切到暗色之后，
+ * 弹出来的东西还是 antd 的默认观感，与页面割裂。antd 官方的答案是改用 hook 版本
+ * （`Modal.useModal()` 等）并把返回的 contextHolder 渲染进树里，但那样每个调用点都得先拿
+ * 到实例，命令式的写法就没了。
+ *
+ * 这里的做法：`ConfigProvider` 内部挂一个 `FeedbackHolder`，它调用那三个 hook，把拿到的
+ * 实例存到模块级变量，并渲染各自的 contextHolder。下面导出的同名函数只是代理，转发给
+ * 被捕获的实例。于是调用写法不变，输出却在树内、能读到主题。
+ *
+ * 没挂 `ConfigProvider` 时回退到 antd 的静态方法：功能照常，只是不跟随主题，
+ * 并在开发环境提示一次。
+ */
+
+var modalInstance = null;
+var messageInstance = null;
+var notificationInstance = null;
+var warned = false;
+var warnOnce = function warnOnce(name) {
+  if (warned || process.env.NODE_ENV === "production") return;
+  warned = true;
+  console.warn("[@hsu-react/ui] ".concat(name, " \u5728 <ConfigProvider> \u4E4B\u5916\u88AB\u8C03\u7528\uFF0C\u5DF2\u56DE\u9000\u5230 antd \u7684\u9759\u6001\u65B9\u6CD5\u3002") + "\u529F\u80FD\u6B63\u5E38\uFF0C\u4F46\u4E0D\u4F1A\u8DDF\u968F ConfigProvider \u6CE8\u5165\u7684\u4E3B\u9898\uFF08\u54C1\u724C\u8272\u3001\u6697\u8272\u7B49\uFF09\u3002" + "\u628A\u5E94\u7528\u5305\u5728 <ConfigProvider> \u91CC\u5373\u53EF\u3002");
+};
+
+/**
+ * 捕获三个 hook 实例并渲染它们的 contextHolder。由 `ConfigProvider` 内部渲染，
+ * 消费方不需要自己挂。
+ */
+export var FeedbackHolder = function FeedbackHolder() {
+  var _AntdModal$useModal = AntdModal.useModal(),
+    _AntdModal$useModal2 = _slicedToArray(_AntdModal$useModal, 2),
+    modalApi = _AntdModal$useModal2[0],
+    modalHolder = _AntdModal$useModal2[1];
+  var _antdMessage$useMessa = antdMessage.useMessage(),
+    _antdMessage$useMessa2 = _slicedToArray(_antdMessage$useMessa, 2),
+    messageApi = _antdMessage$useMessa2[0],
+    messageHolder = _antdMessage$useMessa2[1];
+  var _antdNotification$use = antdNotification.useNotification(),
+    _antdNotification$use2 = _slicedToArray(_antdNotification$use, 2),
+    notificationApi = _antdNotification$use2[0],
+    notificationHolder = _antdNotification$use2[1];
+
+  // 同步赋值而不是放进 useEffect：子树里如果有组件在自己的 effect 里就弹提示，
+  // effect 的执行顺序是自下而上的，等到这里的 effect 跑完就已经晚了。
+  useMemo(function () {
+    modalInstance = modalApi;
+    messageInstance = messageApi;
+    notificationInstance = notificationApi;
+  }, [modalApi, messageApi, notificationApi]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [modalHolder, messageHolder, notificationHolder]
+  });
+};
+
+/** 仅供测试 / 卸载时清理 */
+export var resetFeedbackInstances = function resetFeedbackInstances() {
+  modalInstance = null;
+  messageInstance = null;
+  notificationInstance = null;
+};
+var proxyMessage = function proxyMessage(key) {
+  return function () {
+    var _ref;
+    var api = messageInstance;
+    if (!api) warnOnce("message");
+    return (_ref = api !== null && api !== void 0 ? api : antdMessage)[key].apply(_ref, arguments);
+  };
+};
+var proxyNotification = function proxyNotification(key) {
+  return function () {
+    var _ref2;
+    var api = notificationInstance;
+    if (!api) warnOnce("notification");
+    return (_ref2 = api !== null && api !== void 0 ? api : antdNotification)[key].apply(_ref2, arguments);
+  };
+};
+var proxyModal = function proxyModal(key) {
+  return function () {
+    var _ref3;
+    var api = modalInstance;
+    if (!api) warnOnce("Modal");
+    return (_ref3 = api !== null && api !== void 0 ? api : AntdModal)[key].apply(_ref3, arguments);
+  };
+};
+
+/**
+ * 与 antd 的 `message` 同名同签名，区别是输出在 React 树内，会跟随主题。
+ * 直接把 `import { message } from "antd"` 换成从本库引入即可。
+ */
+export var message = {
+  info: proxyMessage("info"),
+  success: proxyMessage("success"),
+  error: proxyMessage("error"),
+  warning: proxyMessage("warning"),
+  loading: proxyMessage("loading"),
+  open: proxyMessage("open"),
+  destroy: proxyMessage("destroy")
+};
+
+/** 与 antd 的 `notification` 同名同签名，输出跟随主题 */
+export var notification = {
+  success: proxyNotification("success"),
+  error: proxyNotification("error"),
+  info: proxyNotification("info"),
+  warning: proxyNotification("warning"),
+  open: proxyNotification("open"),
+  destroy: proxyNotification("destroy")
+};
+
+/** 与 antd 的 `Modal.confirm` 等同名同签名，输出跟随主题 */
+export var modalFuncs = {
+  info: proxyModal("info"),
+  success: proxyModal("success"),
+  error: proxyModal("error"),
+  warning: proxyModal("warning"),
+  confirm: proxyModal("confirm")
+};

package/es/hooks/index.d.ts

@@ -1,2 +1,7 @@
 export { default as usePermissions, PermissionsContent } from "./usePermissions";
 export { default as useLabelWidth } from "./useLabelWidth";
+export { default as useIsDark } from "./useIsDark";
+export { default as useBreakpoint } from "./useBreakpoint";
+export type { BreakpointName, BreakpointState } from "./useBreakpoint";
+export { default as usePointerType } from "./usePointerType";
+export type { PointerType } from "./usePointerType";

package/es/hooks/index.js

@@ -1,2 +1,5 @@
 export { default as usePermissions, PermissionsContent } from "./usePermissions";
-export { default as useLabelWidth } from "./useLabelWidth";
+export { default as useLabelWidth } from "./useLabelWidth";
+export { default as useIsDark } from "./useIsDark";
+export { default as useBreakpoint } from "./useBreakpoint";
+export { default as usePointerType } from "./usePointerType";

package/es/hooks/useBreakpoint.d.ts

@@ -0,0 +1,24 @@
+import { breakpoints } from "../styles/tokens";
+export type BreakpointName = keyof typeof breakpoints;
+export interface BreakpointState {
+    /** 当前命中的最大断点；视口比 sm 还窄时为 `xs` */
+    current: BreakpointName | "xs";
+    /** 视口 >= 对应断点 */
+    up: Record<BreakpointName, boolean>;
+    /** 视口 < 对应断点 */
+    down: Record<BreakpointName, boolean>;
+    /** `< md`，用于「这是不是手机」这类粗判断 */
+    isMobile: boolean;
+}
+/**
+ * 当前视口命中的断点。
+ *
+ * 断点值与 `styles/_responsive.scss` 的 mixin 同源（都由 tokens.json 生成），所以 JS 里的判断
+ * 不会和 CSS 里的媒体查询错开。
+ *
+ * 能用 CSS 解决的就别用它 —— 媒体查询不需要 JS 参与、没有首屏闪烁、也不会因 SSR 拿不到
+ * `window` 而先渲染错一帧。只有当**结构**要变（比如小屏把表格换成卡片列表、把工具栏收进抽屉）
+ * 时才需要它。
+ */
+declare const useBreakpoint: () => BreakpointState;
+export default useBreakpoint;

package/es/hooks/useBreakpoint.js

@@ -0,0 +1,57 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+import { breakpoints } from "../styles/tokens";
+var NAMES = Object.keys(breakpoints);
+var read = function read() {
+  var width = typeof window === "undefined" ? breakpoints.xl : window.innerWidth;
+  var up = {};
+  var down = {};
+  var current = "xs";
+  for (var _i = 0, _NAMES = NAMES; _i < _NAMES.length; _i++) {
+    var name = _NAMES[_i];
+    var hit = width >= breakpoints[name];
+    up[name] = hit;
+    down[name] = !hit;
+    if (hit) current = name;
+  }
+  return {
+    current: current,
+    up: up,
+    down: down,
+    isMobile: width < breakpoints.md
+  };
+};
+
+/**
+ * 当前视口命中的断点。
+ *
+ * 断点值与 `styles/_responsive.scss` 的 mixin 同源（都由 tokens.json 生成），所以 JS 里的判断
+ * 不会和 CSS 里的媒体查询错开。
+ *
+ * 能用 CSS 解决的就别用它 —— 媒体查询不需要 JS 参与、没有首屏闪烁、也不会因 SSR 拿不到
+ * `window` 而先渲染错一帧。只有当**结构**要变（比如小屏把表格换成卡片列表、把工具栏收进抽屉）
+ * 时才需要它。
+ */
+var useBreakpoint = function useBreakpoint() {
+  var _useState = useState(read),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    var update = function update() {
+      return setState(read());
+    };
+    update();
+    window.addEventListener("resize", update);
+    return function () {
+      return window.removeEventListener("resize", update);
+    };
+  }, []);
+  return state;
+};
+export default useBreakpoint;

package/es/hooks/useIsDark.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether the document is currently in dark mode.
+ *
+ * The CSS variables switch on their own — they are plain CSS. antd's theme cannot: its tokens are
+ * computed in JS, so the algorithm has to be swapped on re-render. This hook is that bridge, and
+ * `ConfigProvider` uses it to pick `darkAlgorithm`.
+ */
+declare const useIsDark: () => boolean;
+export default useIsDark;

package/es/hooks/useIsDark.js

@@ -0,0 +1,64 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+
+/**
+ * Attributes that mark the document as dark. These are the same selectors the generated
+ * `tokens.scss` keys off, so the CSS-variable layer and the antd theme always agree on which
+ * palette is active — `data-theme` is what consuming apps toggle, the `prefers-color*` pair is
+ * what the dumi docs site sets.
+ */
+var DARK_ATTRS = ["data-theme", "data-prefers-color", "data-prefers-color-scheme"];
+var read = function read() {
+  var _window$matchMedia, _window;
+  if (typeof document === "undefined") return false;
+  var root = document.documentElement;
+  for (var _i = 0, _DARK_ATTRS = DARK_ATTRS; _i < _DARK_ATTRS.length; _i++) {
+    var attr = _DARK_ATTRS[_i];
+    var value = root.getAttribute(attr);
+    if (value === "dark") return true;
+    if (value === "light") return false;
+  }
+  return typeof window !== "undefined" && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)").matches);
+};
+
+/**
+ * Whether the document is currently in dark mode.
+ *
+ * The CSS variables switch on their own — they are plain CSS. antd's theme cannot: its tokens are
+ * computed in JS, so the algorithm has to be swapped on re-render. This hook is that bridge, and
+ * `ConfigProvider` uses it to pick `darkAlgorithm`.
+ */
+var useIsDark = function useIsDark() {
+  var _useState = useState(read),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDark = _useState2[0],
+    setIsDark = _useState2[1];
+  useEffect(function () {
+    var _window$matchMedia2, _window2, _media$addEventListen;
+    var update = function update() {
+      return setIsDark(read());
+    };
+    update();
+    var observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [].concat(DARK_ATTRS)
+    });
+
+    // Only relevant while no explicit attribute is set, but harmless otherwise.
+    var media = (_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 ? void 0 : _window$matchMedia2.call(_window2, "(prefers-color-scheme: dark)");
+    media === null || media === void 0 || (_media$addEventListen = media.addEventListener) === null || _media$addEventListen === void 0 || _media$addEventListen.call(media, "change", update);
+    return function () {
+      var _media$removeEventLis;
+      observer.disconnect();
+      media === null || media === void 0 || (_media$removeEventLis = media.removeEventListener) === null || _media$removeEventLis === void 0 || _media$removeEventLis.call(media, "change", update);
+    };
+  }, []);
+  return isDark;
+};
+export default useIsDark;

package/es/hooks/usePointerType.d.ts

@@ -0,0 +1,22 @@
+export interface PointerType {
+    /** 主要输入设备是粗指针（手指、触控笔） */
+    isCoarse: boolean;
+    /** 设备具备真正的悬停能力（鼠标、触控板） */
+    canHover: boolean;
+    /** 粗指针且不能悬停 —— 通常意义上的「触屏设备」 */
+    isTouch: boolean;
+}
+/**
+ * 当前设备的指针能力。
+ *
+ * 刻意**不**做 UA 嗅探：二合一设备可以在触摸与鼠标之间来回切换，媒体查询会跟着变，UA 不会。
+ *
+ * 另外说明一个常见误解：不需要为了移动端把 `onClick` 换成 `onTouchStart`。触摸事件序列本来
+ * 就会合成 click，`onClick` 在触屏上一直是能用的；换成 touch 反而会丢掉键盘可访问性、在滚动
+ * 时误触发、并与合成的 click 重复触发。移动端真正要处理的是别的东西 —— 300ms 点击延迟
+ * （用 `touch-action: manipulation`）、点完粘住不消的 `:hover`（用 `_responsive.scss` 的
+ * `hover` mixin 包起来）、以及过小的点按目标。这个 hook 用于最后一类：需要按指针类型
+ * **改变结构或尺寸**的场合。
+ */
+declare const usePointerType: () => PointerType;
+export default usePointerType;

package/es/hooks/usePointerType.js

@@ -0,0 +1,62 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+var QUERY_COARSE = "(pointer: coarse)";
+var QUERY_HOVER = "(hover: hover)";
+var read = function read() {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return {
+      isCoarse: false,
+      canHover: true,
+      isTouch: false
+    };
+  }
+  var isCoarse = window.matchMedia(QUERY_COARSE).matches;
+  var canHover = window.matchMedia(QUERY_HOVER).matches;
+  return {
+    isCoarse: isCoarse,
+    canHover: canHover,
+    isTouch: isCoarse && !canHover
+  };
+};
+
+/**
+ * 当前设备的指针能力。
+ *
+ * 刻意**不**做 UA 嗅探：二合一设备可以在触摸与鼠标之间来回切换，媒体查询会跟着变，UA 不会。
+ *
+ * 另外说明一个常见误解：不需要为了移动端把 `onClick` 换成 `onTouchStart`。触摸事件序列本来
+ * 就会合成 click，`onClick` 在触屏上一直是能用的；换成 touch 反而会丢掉键盘可访问性、在滚动
+ * 时误触发、并与合成的 click 重复触发。移动端真正要处理的是别的东西 —— 300ms 点击延迟
+ * （用 `touch-action: manipulation`）、点完粘住不消的 `:hover`（用 `_responsive.scss` 的
+ * `hover` mixin 包起来）、以及过小的点按目标。这个 hook 用于最后一类：需要按指针类型
+ * **改变结构或尺寸**的场合。
+ */
+var usePointerType = function usePointerType() {
+  var _useState = useState(read),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    var _coarse$addEventListe, _hover$addEventListen;
+    var update = function update() {
+      return setState(read());
+    };
+    update();
+    var coarse = window.matchMedia(QUERY_COARSE);
+    var hover = window.matchMedia(QUERY_HOVER);
+    (_coarse$addEventListe = coarse.addEventListener) === null || _coarse$addEventListe === void 0 || _coarse$addEventListe.call(coarse, "change", update);
+    (_hover$addEventListen = hover.addEventListener) === null || _hover$addEventListen === void 0 || _hover$addEventListen.call(hover, "change", update);
+    return function () {
+      var _coarse$removeEventLi, _hover$removeEventLis;
+      (_coarse$removeEventLi = coarse.removeEventListener) === null || _coarse$removeEventLi === void 0 || _coarse$removeEventLi.call(coarse, "change", update);
+      (_hover$removeEventLis = hover.removeEventListener) === null || _hover$removeEventLis === void 0 || _hover$removeEventLis.call(hover, "change", update);
+    };
+  }, []);
+  return state;
+};
+export default usePointerType;

package/es/index.d.ts

@@ -2,16 +2,16 @@ export { default as ConfigProvider } from "./config-provider";
 export type { ConfigProviderProps } from "./config-provider";
 export { configureRequest, get, post, del, put, } from "./request";
 export type { RequestImpl, RequestConfig, ResType, ListRes, FileRes } from "./request";
-export { usePermissions, PermissionsContent, useLabelWidth } from "./hooks";
+export { usePermissions, PermissionsContent, useLabelWidth, useIsDark, useBreakpoint, usePointerType, } from "./hooks";
+export type { BreakpointName, BreakpointState, PointerType } from "./hooks";
 export { getUUID, supportsHasSelector, isLegacyHasSelectorBrowser } from "./utils";
-export { lightTokens, darkTokens, defaultPrimaryColor } from "./styles/tokens";
+export { lightTokens, darkTokens, defaultPrimaryColor, radius, fontTokens, controlTokens, modalWidth, breakpoints, toAntdTheme, } from "./styles/tokens";
 export type { HsuThemeTokens } from "./styles/tokens";
+export { message, notification } from "./feedback";
 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

@@ -3,18 +3,32 @@ export { default as ConfigProvider } from "./config-provider";
 // Request injection layer
 export { configureRequest, get, post, del, put } from "./request";
 // hooks & utils
-export { usePermissions, PermissionsContent, useLabelWidth } from "./hooks";
+export { usePermissions, PermissionsContent, useLabelWidth, useIsDark, useBreakpoint, usePointerType } from "./hooks";
 export { getUUID, supportsHasSelector, isLegacyHasSelectorBrowser } from "./utils";
 
-// Design tokens (TS constants for JS-side consumers such as antd themeConfig; CSS-variable version lives in es/styles/tokens.scss)
-export { lightTokens, darkTokens, defaultPrimaryColor } from "./styles/tokens";
+// Design tokens. src/styles/tokens.json is the single source of truth: this module is its JS side
+// (including toAntdTheme, which ConfigProvider feeds to antd), and es/styles/tokens.scss is the
+// generated --vita-* CSS-variable side.
+export { lightTokens, darkTokens, defaultPrimaryColor, radius, fontTokens, controlTokens, modalWidth, breakpoints, toAntdTheme } from "./styles/tokens";
+// 主题化的命令式反馈 API。与 antd 的 message / notification 同名同签名，区别是输出落在
+// ConfigProvider 内，会跟随注入的主题；把 `from "antd"` 换成 `from "@hsu-react/ui"` 即可。
+export { message, notification } from "./feedback";
+
+// 布局组件**刻意不从这里导出**。
+//
+// 它们依赖 react-router / react-intl，而这两个是可选 peerDependency。一旦在根入口静态
+// re-export，`import { Button } from "@hsu-react/ui"` 也会让打包器去解析 react-router ——
+// 没装的项目直接构建失败，"可选" 就名存实亡了。
+//
+// 改为子路径引入：
+//   import Layout from "@hsu-react/ui/es/layout";
+//   import type { RouteType } from "@hsu-react/ui/es/layout";
+
 // Components
 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/layout/Breadcrumb/_components/BreadcrumbItemIcon/index.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+interface BreadcrumbItemIconProps {
+    icon?: ReactNode;
+    title?: ReactNode;
+}
+/**
+ * Breadcrumb item icon and title component
+ */
+declare const BreadcrumbItemIcon: React.FC<BreadcrumbItemIconProps>;
+export default BreadcrumbItemIcon;

package/es/layout/Breadcrumb/_components/BreadcrumbItemIcon/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Space } from "antd";
+import Icon from "../../../../components/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Breadcrumb item icon and title component
+ */
+var BreadcrumbItemIcon = function BreadcrumbItemIcon(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title;
+  return /*#__PURE__*/_jsxs(Space, {
+    size: 5,
+    children: [typeof icon === "string" ? /*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }) : icon, title]
+  });
+};
+export default BreadcrumbItemIcon;

package/es/layout/Breadcrumb/_components/BreadcrumbMenuItem/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { BreadcrumbType } from "../..";
+interface BreadcrumbMenuItemProps {
+    item: BreadcrumbType;
+    navigate: (path: string) => void;
+}
+/**
+ * Breadcrumb menu item component
+ */
+declare const BreadcrumbMenuItem: React.FC<BreadcrumbMenuItemProps>;
+export default BreadcrumbMenuItem;

package/es/layout/Breadcrumb/_components/BreadcrumbMenuItem/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Space } from "antd";
+import Icon from "../../../../components/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Breadcrumb menu item component
+ */
+var BreadcrumbMenuItem = function BreadcrumbMenuItem(_ref) {
+  var item = _ref.item,
+    navigate = _ref.navigate;
+  var handleClick = function handleClick() {
+    var _item$route;
+    if ((!item.children || (_item$route = item.route) !== null && _item$route !== void 0 && _item$route.index) && item.path) {
+      navigate(item.path);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Space, {
+    size: 5,
+    onClick: handleClick,
+    children: [typeof item.icon === "string" ? /*#__PURE__*/_jsx(Icon, {
+      icon: item.icon
+    }) : item.icon, item.title]
+  });
+};
+export default BreadcrumbMenuItem;

package/es/layout/Breadcrumb/_hooks/useBreadcrumbPath.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbType } from "..";
+/**
+ * Hook that handles breadcrumb path matching
+ */
+export declare const useBreadcrumbPath: (_routes: BreadcrumbType[]) => BreadcrumbType[];

package/es/layout/Breadcrumb/_hooks/useBreadcrumbPath.js

@@ -0,0 +1,104 @@
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState, useContext, useMemo } from "react";
+import { useLocation } from "react-router";
+import { checkBreadcrumbPathMatch } from "../_utils/pathMatch";
+import { NavTabBarTitleContent } from "../../_hooks/useSetTabTitle";
+
+/**
+ * Hook that handles breadcrumb path matching
+ */
+export var useBreadcrumbPath = function useBreadcrumbPath(_routes) {
+  var location = useLocation();
+  var _useContext = useContext(NavTabBarTitleContent),
+    tabTitles = _useContext.tabTitles;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    breadcrumb = _useState2[0],
+    setBreadcrumb = _useState2[1];
+  var pathname = useMemo(function () {
+    return decodeURI(location.pathname);
+  }, [location.pathname]);
+  useEffect(function () {
+    var _setBreadcrumb = function _setBreadcrumb(routes, parents) {
+      var checkPath = function checkPath(item) {
+        if (item.path) {
+          var _item$parent;
+          var isMatch = checkBreadcrumbPathMatch(pathname, item.path, (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent.path);
+          if (isMatch) {
+            // If tabTitles has a title for the current path, apply the custom title
+            var finalItem = tabTitles && tabTitles[pathname] !== undefined ? _objectSpread(_objectSpread({}, item), {}, {
+              title: tabTitles[pathname]
+            }) : item;
+            if (parents) {
+              return [].concat(_toConsumableArray(parents), [finalItem]);
+            } else {
+              return [finalItem];
+            }
+          }
+        }
+        return [];
+      };
+      routes === null || routes === void 0 || routes.forEach(function (item) {
+        if (item.children) {
+          var _item$route;
+          if ((_item$route = item.route) !== null && _item$route !== void 0 && _item$route.index) {
+            var _breadcrumb = checkPath(item);
+            if (_breadcrumb.length > 0) {
+              setBreadcrumb(_breadcrumb);
+            } else {
+              var _newParents = parents ? [].concat(_toConsumableArray(parents), [item]) : [item];
+              _setBreadcrumb(item.children, _newParents);
+            }
+          } else {
+            var _newParents2 = parents ? [].concat(_toConsumableArray(parents), [item]) : [item];
+            _setBreadcrumb(item.children, _newParents2);
+          }
+        } else {
+          var _breadcrumb2 = checkPath(item);
+          if (_breadcrumb2.length > 0) {
+            setBreadcrumb(_breadcrumb2);
+          }
+        }
+      });
+    };
+    setBreadcrumb([]);
+    _setBreadcrumb(_routes);
+  }, [_routes, pathname, tabTitles]);
+
+  // When tabTitles changes, update the title of the last breadcrumb item
+  useEffect(function () {
+    if (!pathname) return;
+    setBreadcrumb(function (prev) {
+      var _lastItem$parent;
+      if (prev.length === 0) return prev;
+      var newBreadcrumb = _toConsumableArray(prev);
+      var lastItem = newBreadcrumb[newBreadcrumb.length - 1];
+
+      // Check whether the current path matches the last breadcrumb item
+      var isPathMatch = lastItem.path === pathname || lastItem.path && checkBreadcrumbPathMatch(pathname, lastItem.path, (_lastItem$parent = lastItem.parent) === null || _lastItem$parent === void 0 ? void 0 : _lastItem$parent.path);
+      if (isPathMatch && tabTitles && tabTitles[pathname] !== undefined) {
+        // If tabTitles has a title for the current path, update it
+        newBreadcrumb[newBreadcrumb.length - 1] = _objectSpread(_objectSpread({}, lastItem), {}, {
+          title: tabTitles[pathname]
+        });
+      }
+      return newBreadcrumb;
+    });
+  }, [tabTitles, pathname]);
+  return breadcrumb;
+};