@hsu-react/ui 0.0.25 → 2.0.0

package/lib/components/Tree/index.module.scss

@@ -11,9 +11,9 @@
   height: 100%;
   min-height: 0px !important;
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
-  border-radius: 8px;
+  border-radius: var(--vita-radius);
 
   .title_search {
     display: flex;
@@ -35,7 +35,7 @@
     }
 
     .search {
-      height: 32px;
+      height: var(--vita-control-height);
 
       .searchIcon {
         font-size: 16px;
@@ -58,11 +58,11 @@
 
     :global(.ant-tree-treenode) {
       &:hover {
-        background: var(--cf-subtle);
+        background: var(--vita-muted);
       }
 
       &:has(> :global(.ant-tree-node-selected)) {
-        background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
+        background-color: color-mix(in srgb, var(--vita-primary) 12%, transparent);
 
         :global(.ant-tree-node-selected) {
           background-color: transparent;
@@ -131,7 +131,7 @@
   &.legacyHasSelectedNodeBackground {
     .treeContainer {
       :global(.ant-tree-treenode):global(.ant-tree-treenode-selected) {
-        background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
+        background-color: color-mix(in srgb, var(--vita-primary) 12%, transparent);
 
         :global(.ant-tree-node-selected) {
           background-color: transparent;

package/lib/components/Upload/_components/UploadedItem/index.js

@@ -70,10 +70,10 @@ const UploadedItem = ({
     className: (0, _classnames.default)(_indexModule.default.fileItem, listProps?.item),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
       title: name,
-      color: "var(--cf-subtle)",
+      color: "var(--vita-muted)",
       styles: {
-        body: {
-          color: "var(--cf-text)",
+        container: {
+          color: "var(--vita-foreground)",
           padding: "6px 16px"
         }
       },

package/lib/components/Upload/_components/UploadingItem/index.js

@@ -28,10 +28,10 @@ const UploadingItem = ({
       className: _indexModule.default.uploading,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
         title: name,
-        color: "var(--cf-subtle)",
+        color: "var(--vita-muted)",
         styles: {
-          body: {
-            color: "var(--cf-text)",
+          container: {
+            color: "var(--vita-foreground)",
             padding: "6px 16px"
           }
         },

package/lib/components/Upload/_utils/normalUpload.d.ts

@@ -1,7 +1,7 @@
 import { AxiosRequestConfig } from "axios";
 import { RcFile } from "antd/es/upload";
 import { UploadingList } from "..";
-import type { UploadRequestOption } from "rc-upload/lib/interface";
+import type { UploadRequestOption } from "../../../types/antd";
 interface NormalUploadOptions {
     file: RcFile;
     action: string;

package/lib/components/Upload/_utils/validateFile.js

@@ -5,6 +5,52 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.validateFile = validateFile;
 var _toMB = require("./toMB");
+/**
+ * 文件是否命中 accept —— 与 antd 保持一致的语义。
+ *
+ * 此前是把 accept 拼进正则：`new RegExp(`(${accept.replace(/,/g, "|")})$`)`，有两个问题：
+ * 字符没转义（`.png` 里的 `.` 是「任意字符」，实测放行了 `axpng`），且 HTML 允许的 MIME
+ * 形式里 `image/*` 的 `*` 会被当成量词（实测把 photo.png 判成了格式错误）。把外部字符串
+ * 拼进正则本身也是 ReDoS 入口。
+ *
+ * 这里照抄 @rc-component/upload 的 attr-accept 语义，而不是另写一套：这个函数是上传前的
+ * 预校验，antd 自己的 accept 过滤也在跑，两边规则一旦不一致，就会出现「antd 放行、我们拦下」
+ * 或反过来的割裂。逐条 some()，任一命中即通过，全不命中即拒绝 —— 不做额外兜底。
+ */
+const matchesAccept = (file, accept) => {
+  const items = accept.split(",");
+  const fileName = file.name || "";
+  const mimeType = file.type || "";
+  const baseMimeType = mimeType.replace(/\/.*$/, "");
+  return items.some(item => {
+    const validType = item.trim();
+    if (!validType) return false;
+
+    // `*` / `*​/*`：全部放行
+    if (/^\*(\/\*)?$/.test(validType)) return true;
+
+    // 扩展名。jpg 与 jpeg 互认，与 attr-accept 一致
+    if (validType.charAt(0) === ".") {
+      const lowerName = fileName.toLowerCase();
+      const lowerType = validType.toLowerCase();
+      const affixes = lowerType === ".jpg" || lowerType === ".jpeg" ? [".jpg", ".jpeg"] : [lowerType];
+      return affixes.some(affix => lowerName.endsWith(affix));
+    }
+
+    // `image/*` 这类通配
+    if (/\/\*$/.test(validType)) {
+      return baseMimeType === validType.replace(/\/.*$/, "");
+    }
+
+    // MIME 全等
+    if (mimeType === validType) return true;
+
+    // `png` 这种没有点也没有斜杠的写法是无效 accept，attr-accept 选择跳过而不是拦下
+    if (/^\w+$/.test(validType)) return true;
+    return false;
+  });
+};
+
 /**
  * Validate file format and size
  */
@@ -15,8 +61,7 @@ function validateFile({
   en
 }) {
   if (accept) {
-    const fileRegex = new RegExp(`(${accept.replace(/,/g, "|")})$`);
-    if (!fileRegex.test(file.name.toLowerCase())) {
+    if (!matchesAccept(file, accept)) {
       return {
         valid: false,
         error: new Error(en ? `File format error, please upload ${accept} file` : `文件格式错误，请上传 ${accept} 文件`)

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

@@ -1,4 +1,4 @@
-import { UploadProps as AntdUploadProps, UploadFile } from "antd";
+import { Upload as AntdUpload, UploadProps as AntdUploadProps, UploadFile } from "antd";
 import React from "react";
 import { Canceler } from "axios";
 import { ButtonProps, ProgressProps } from "antd";
@@ -38,5 +38,11 @@ export interface UploadProps extends Omit<AntdUploadProps, "action" | "data"> {
     };
     en?: boolean;
 }
-declare const Upload: React.FC<UploadProps>;
+interface UploadFC extends React.FC<UploadProps> {
+    /** antd 的拖拽上传区 */
+    Dragger: typeof AntdUpload.Dragger;
+    /** `beforeUpload` 返回它表示「跳过这个文件且不进 fileList」 */
+    LIST_IGNORE: typeof AntdUpload.LIST_IGNORE;
+}
+declare const Upload: UploadFC;
 export default Upload;

package/lib/components/Upload/index.js

@@ -45,6 +45,11 @@ const Upload = props => {
     onPreview,
     ...uploadConfig
   } = props;
+
+  // antd v6 widened `accept` to `string | { format: string; filter?: ... }`. This component's own
+  // extension check (validateFile) only understands the comma-separated string, so read the format
+  // out of the object form; antd still applies the full config to the native file input.
+  const acceptFormat = typeof accept === "string" ? accept : accept.format;
   const {
     fileList: _fileList,
     setFileList,
@@ -90,7 +95,7 @@ const Upload = props => {
       chunkNum,
       data,
       headers,
-      accept,
+      accept: acceptFormat,
       size,
       en,
       uploadingList,
@@ -100,7 +105,7 @@ const Upload = props => {
       onError,
       onUploadSuccess
     });
-  }, [chunkAction, mergeChunkAction, chunkNum, data, headers, accept, size, en, uploadingList, setUploadingList, onUploadSuccess]);
+  }, [chunkAction, mergeChunkAction, chunkNum, data, headers, acceptFormat, size, en, uploadingList, setUploadingList, onUploadSuccess]);
 
   // Normal upload
   const customRequest = (0, _react.useCallback)(async options => {
@@ -123,7 +128,7 @@ const Upload = props => {
       action,
       data,
       headers,
-      accept,
+      accept: acceptFormat,
       size,
       en,
       uploadingList,
@@ -133,7 +138,7 @@ const Upload = props => {
       onError,
       onUploadSuccess
     });
-  }, [action, data, headers, accept, size, en, uploadingList, setUploadingList, onUploadSuccess]);
+  }, [action, data, headers, acceptFormat, size, en, uploadingList, setUploadingList, onUploadSuccess]);
   const handleChange = ({
     file,
     fileList: newFileList
@@ -208,4 +213,6 @@ const Upload = props => {
     })]
   });
 };
+Upload.Dragger = _antd.Upload.Dragger;
+Upload.LIST_IGNORE = _antd.Upload.LIST_IGNORE;
 var _default = exports.default = Upload;

package/lib/config-provider/index.d.ts

@@ -1,17 +1,49 @@
 import React from "react";
+import { type ThemeConfig } from "antd";
 import { RequestImpl } from "../request";
 export interface ConfigProviderProps {
     /** Current user's permission code list; when provided, usePermissions / hasPermi validate against it. If omitted, everything is allowed by default */
     permissions?: string[] | null;
     /** Inject the HTTP request implementation, used by smart components such as ImportForm */
     request?: Partial<RequestImpl>;
+    /**
+     * Brand colour. Sets both halves of the token layer at once: the `--vita-primary` CSS variable
+     * (via `--primary-color`, so pre-2.0 overrides keep working) and antd's `colorPrimary`.
+     *
+     * Setting the CSS variable by hand only moves this library's own styles — antd derives a
+     * 10-step palette from the JS token and cannot read a `var()`. Going through this prop is what
+     * keeps the two in step.
+     */
+    primaryColor?: string;
+    /**
+     * Force light/dark instead of following `html[data-theme]` / the OS preference.
+     * The CSS variables follow the same signals on their own.
+     */
+    dark?: boolean;
+    /**
+     * Extra antd theme config, merged on top of the generated one — escape hatch for a consumer
+     * that wants a token this library does not map.
+     */
+    theme?: ThemeConfig;
+    /**
+     * Set to `false` to stop managing antd's theme entirely, leaving it to the host app.
+     * Components this library wraps still follow the `--vita-*` variables; antd components it does
+     * not wrap will fall back to antd's stock look.
+     */
+    antdTheme?: boolean;
     children?: React.ReactNode;
 }
 /**
- * Hsu UI global configuration: injects permissions and the request implementation.
+ * Hsu UI global configuration: permissions, the request implementation, and the design tokens.
+ *
+ * On the theme: the `--vita-*` CSS variables cover everything this library styles itself, but not
+ * the antd components it merely re-exports or that a page uses directly. Feeding antd's
+ * `theme.token` from the very same tokens is what makes an unwrapped `<Steps />` land on the same
+ * palette, radii and type scale as a wrapped `<Table />` — without this library having to wrap all
+ * 75 antd components to keep the look consistent.
  *
  * @example
- * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
+ * <ConfigProvider permissions={perms} request={{ get, post, del, put }} primaryColor="#7c3aed">
  *   <App />
  * </ConfigProvider>
  */

package/lib/config-provider/index.js

@@ -5,22 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
 var _usePermissions = require("../hooks/usePermissions");
+var _useIsDark = _interopRequireDefault(require("../hooks/useIsDark"));
 var _request = require("../request");
+var _tokens = require("../styles/tokens");
+var _feedback = require("../feedback");
 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; }
 /**
- * Hsu UI global configuration: injects permissions and the request implementation.
+ * Hsu UI global configuration: permissions, the request implementation, and the design tokens.
+ *
+ * On the theme: the `--vita-*` CSS variables cover everything this library styles itself, but not
+ * the antd components it merely re-exports or that a page uses directly. Feeding antd's
+ * `theme.token` from the very same tokens is what makes an unwrapped `<Steps />` land on the same
+ * palette, radii and type scale as a wrapped `<Table />` — without this library having to wrap all
+ * 75 antd components to keep the look consistent.
  *
  * @example
- * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
+ * <ConfigProvider permissions={perms} request={{ get, post, del, put }} primaryColor="#7c3aed">
  *   <App />
  * </ConfigProvider>
  */
 const ConfigProvider = ({
   permissions = null,
   request,
+  primaryColor,
+  dark,
+  theme,
+  antdTheme: manageAntdTheme = true,
   children
 }) => {
   // Inject synchronously during render so child components get the request implementation on their very first interaction
@@ -30,9 +45,45 @@ const ConfigProvider = ({
   const permissionsValue = (0, _react.useMemo)(() => ({
     permissions
   }), [permissions]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePermissions.PermissionsContent.Provider, {
+  const detectedDark = (0, _useIsDark.default)();
+  const isDark = dark ?? detectedDark;
+  const themeConfig = (0, _react.useMemo)(() => ({
+    algorithm: isDark ? _antd.theme.darkAlgorithm : _antd.theme.defaultAlgorithm,
+    ...theme,
+    token: {
+      ...(0, _tokens.toAntdTheme)({
+        dark: isDark,
+        primaryColor
+      }),
+      ...theme?.token
+    },
+    components: {
+      ...(0, _tokens.toAntdComponents)(),
+      ...theme?.components
+    }
+  }), [isDark, primaryColor, theme]);
+
+  // Written onto <html> rather than a wrapper element: this provider usually sits at the very top
+  // of the tree, and slipping an extra div in there would change the layout of whatever it wraps.
+  // `--primary-color` rather than `--vita-primary` because the generated tokens make the latter
+  // point at the former, so writing the legacy name keeps both spellings working for consumers.
+  (0, _react.useEffect)(() => {
+    if (!primaryColor || typeof document === "undefined") return;
+    const root = document.documentElement;
+    const previous = root.style.getPropertyValue("--primary-color");
+    root.style.setProperty("--primary-color", primaryColor);
+    return () => {
+      if (previous) root.style.setProperty("--primary-color", previous);else root.style.removeProperty("--primary-color");
+    };
+  }, [primaryColor]);
+  const tree = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePermissions.PermissionsContent.Provider, {
     value: permissionsValue,
-    children: children
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_feedback.FeedbackHolder, {}), children]
+  });
+  if (!manageAntdTheme) return tree;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
+    theme: themeConfig,
+    children: tree
   });
 };
 var _default = exports.default = ConfigProvider;

package/lib/feedback/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { HookAPI as ModalHookApi } from "antd/es/modal/useModal";
+import type { MessageInstance } from "antd/es/message/interface";
+import type { NotificationInstance } from "antd/es/notification/interface";
+/**
+ * 捕获三个 hook 实例并渲染它们的 contextHolder。由 `ConfigProvider` 内部渲染，
+ * 消费方不需要自己挂。
+ */
+export declare const FeedbackHolder: React.FC;
+/** 仅供测试 / 卸载时清理 */
+export declare const resetFeedbackInstances: () => void;
+/**
+ * 与 antd 的 `message` 同名同签名，区别是输出在 React 树内，会跟随主题。
+ * 直接把 `import { message } from "antd"` 换成从本库引入即可。
+ */
+export declare const message: MessageInstance;
+/** 与 antd 的 `notification` 同名同签名，输出跟随主题 */
+export declare const notification: NotificationInstance;
+/** 与 antd 的 `Modal.confirm` 等同名同签名，输出跟随主题 */
+export declare const modalFuncs: ModalHookApi;

package/lib/feedback/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetFeedbackInstances = exports.notification = exports.modalFuncs = exports.message = exports.FeedbackHolder = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+/**
+ * 主题化的 message / notification / modal。
+ *
+ * 问题：antd 的 `message.success()`、`Modal.confirm()` 这类是命令式静态方法，调用时不在
+ * React 树里，读不到 `ConfigProvider` 注入的 `theme.token` —— 换过品牌色或切到暗色之后，
+ * 弹出来的东西还是 antd 的默认观感，与页面割裂。antd 官方的答案是改用 hook 版本
+ * （`Modal.useModal()` 等）并把返回的 contextHolder 渲染进树里，但那样每个调用点都得先拿
+ * 到实例，命令式的写法就没了。
+ *
+ * 这里的做法：`ConfigProvider` 内部挂一个 `FeedbackHolder`，它调用那三个 hook，把拿到的
+ * 实例存到模块级变量，并渲染各自的 contextHolder。下面导出的同名函数只是代理，转发给
+ * 被捕获的实例。于是调用写法不变，输出却在树内、能读到主题。
+ *
+ * 没挂 `ConfigProvider` 时回退到 antd 的静态方法：功能照常，只是不跟随主题，
+ * 并在开发环境提示一次。
+ */
+
+let modalInstance = null;
+let messageInstance = null;
+let notificationInstance = null;
+let warned = false;
+const warnOnce = name => {
+  if (warned || process.env.NODE_ENV === "production") return;
+  warned = true;
+  console.warn(`[@hsu-react/ui] ${name} 在 <ConfigProvider> 之外被调用，已回退到 antd 的静态方法。` + `功能正常，但不会跟随 ConfigProvider 注入的主题（品牌色、暗色等）。` + `把应用包在 <ConfigProvider> 里即可。`);
+};
+
+/**
+ * 捕获三个 hook 实例并渲染它们的 contextHolder。由 `ConfigProvider` 内部渲染，
+ * 消费方不需要自己挂。
+ */
+const FeedbackHolder = () => {
+  const [modalApi, modalHolder] = _antd.Modal.useModal();
+  const [messageApi, messageHolder] = _antd.message.useMessage();
+  const [notificationApi, notificationHolder] = _antd.notification.useNotification();
+
+  // 同步赋值而不是放进 useEffect：子树里如果有组件在自己的 effect 里就弹提示，
+  // effect 的执行顺序是自下而上的，等到这里的 effect 跑完就已经晚了。
+  (0, _react.useMemo)(() => {
+    modalInstance = modalApi;
+    messageInstance = messageApi;
+    notificationInstance = notificationApi;
+  }, [modalApi, messageApi, notificationApi]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [modalHolder, messageHolder, notificationHolder]
+  });
+};
+
+/** 仅供测试 / 卸载时清理 */
+exports.FeedbackHolder = FeedbackHolder;
+const resetFeedbackInstances = () => {
+  modalInstance = null;
+  messageInstance = null;
+  notificationInstance = null;
+};
+exports.resetFeedbackInstances = resetFeedbackInstances;
+const proxyMessage = key => (...args) => {
+  const api = messageInstance;
+  if (!api) warnOnce("message");
+  return (api ?? _antd.message)[key](...args);
+};
+const proxyNotification = key => (...args) => {
+  const api = notificationInstance;
+  if (!api) warnOnce("notification");
+  return (api ?? _antd.notification)[key](...args);
+};
+const proxyModal = key => (...args) => {
+  const api = modalInstance;
+  if (!api) warnOnce("Modal");
+  return (api ?? _antd.Modal)[key](...args);
+};
+
+/**
+ * 与 antd 的 `message` 同名同签名，区别是输出在 React 树内，会跟随主题。
+ * 直接把 `import { message } from "antd"` 换成从本库引入即可。
+ */
+const message = exports.message = {
+  info: proxyMessage("info"),
+  success: proxyMessage("success"),
+  error: proxyMessage("error"),
+  warning: proxyMessage("warning"),
+  loading: proxyMessage("loading"),
+  open: proxyMessage("open"),
+  destroy: proxyMessage("destroy")
+};
+
+/** 与 antd 的 `notification` 同名同签名，输出跟随主题 */
+const notification = exports.notification = {
+  success: proxyNotification("success"),
+  error: proxyNotification("error"),
+  info: proxyNotification("info"),
+  warning: proxyNotification("warning"),
+  open: proxyNotification("open"),
+  destroy: proxyNotification("destroy")
+};
+
+/** 与 antd 的 `Modal.confirm` 等同名同签名，输出跟随主题 */
+const modalFuncs = exports.modalFuncs = {
+  info: proxyModal("info"),
+  success: proxyModal("success"),
+  error: proxyModal("error"),
+  warning: proxyModal("warning"),
+  confirm: proxyModal("confirm")
+};

package/lib/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/lib/hooks/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "PermissionsContent", {
     return _usePermissions.PermissionsContent;
   }
 });
+Object.defineProperty(exports, "useBreakpoint", {
+  enumerable: true,
+  get: function () {
+    return _useBreakpoint.default;
+  }
+});
+Object.defineProperty(exports, "useIsDark", {
+  enumerable: true,
+  get: function () {
+    return _useIsDark.default;
+  }
+});
 Object.defineProperty(exports, "useLabelWidth", {
   enumerable: true,
   get: function () {
@@ -21,8 +33,17 @@ Object.defineProperty(exports, "usePermissions", {
     return _usePermissions.default;
   }
 });
+Object.defineProperty(exports, "usePointerType", {
+  enumerable: true,
+  get: function () {
+    return _usePointerType.default;
+  }
+});
 var _usePermissions = _interopRequireWildcard(require("./usePermissions"));
 var _useLabelWidth = _interopRequireDefault(require("./useLabelWidth"));
+var _useIsDark = _interopRequireDefault(require("./useIsDark"));
+var _useBreakpoint = _interopRequireDefault(require("./useBreakpoint"));
+var _usePointerType = _interopRequireDefault(require("./usePointerType"));
 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; }

package/lib/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/lib/hooks/useBreakpoint.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _tokens = require("../styles/tokens");
+const NAMES = Object.keys(_tokens.breakpoints);
+const read = () => {
+  const width = typeof window === "undefined" ? _tokens.breakpoints.xl : window.innerWidth;
+  const up = {};
+  const down = {};
+  let current = "xs";
+  for (const name of NAMES) {
+    const hit = width >= _tokens.breakpoints[name];
+    up[name] = hit;
+    down[name] = !hit;
+    if (hit) current = name;
+  }
+  return {
+    current,
+    up,
+    down,
+    isMobile: width < _tokens.breakpoints.md
+  };
+};
+
+/**
+ * 当前视口命中的断点。
+ *
+ * 断点值与 `styles/_responsive.scss` 的 mixin 同源（都由 tokens.json 生成），所以 JS 里的判断
+ * 不会和 CSS 里的媒体查询错开。
+ *
+ * 能用 CSS 解决的就别用它 —— 媒体查询不需要 JS 参与、没有首屏闪烁、也不会因 SSR 拿不到
+ * `window` 而先渲染错一帧。只有当**结构**要变（比如小屏把表格换成卡片列表、把工具栏收进抽屉）
+ * 时才需要它。
+ */
+const useBreakpoint = () => {
+  const [state, setState] = (0, _react.useState)(read);
+  (0, _react.useEffect)(() => {
+    const update = () => setState(read());
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  return state;
+};
+var _default = exports.default = useBreakpoint;

package/lib/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;