@hsu-react/ui 1.0.0 → 2.0.1

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

@@ -8,43 +8,47 @@
   height: 100%;
   // When the parent has no explicit height (height:100% resolves to auto), guarantee a min height
   // consistent with Input and other form controls, so it is neither squashed nor mis-sized in search rows.
-  min-height: 32px;
+  min-height: var(--vita-control-height);
   padding: 0px 11px;
 
   // CF style: outlined input control that follows appearance switching
-  border: 1px solid var(--cf-border);
-  border-radius: 6px;
+  border: 1px solid var(--vita-border);
+  border-radius: var(--vita-radius);
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
   transition:
     border-color 0.3s,
     box-shadow 0.3s;
 
   &.disabled {
-    background: var(--cf-subtle);
+    background: var(--vita-muted);
 
-    color: var(--cf-text-3);
+    color: var(--vita-subtle-foreground);
 
-    border-color: var(--cf-border);
+    border-color: var(--vita-border);
 
     cursor: not-allowed;
 
     .antdSelect {
       cursor: not-allowed;
 
+      // v6 renders the single-mode value straight into `.ant-select-content` / `.ant-select-input`;
+      // `.ant-select-selection-item` only survives as the tag in multiple mode.
+      :global(.ant-select-content),
+      :global(.ant-select-input),
       :global(.ant-select-selection-item) {
-        color: var(--cf-text-3);
+        color: var(--vita-subtle-foreground);
       }
 
-      :global(.ant-select-arrow) {
+      :global(.ant-select-suffix) {
         cursor: not-allowed;
       }
     }
 
     &:hover,
     &.focused {
-      border-color: var(--cf-border);
+      border-color: var(--vita-border);
 
       box-shadow: none;
     }
@@ -52,9 +56,9 @@
 
   &:hover,
   &.focused {
-    border-color: var(--primary-color);
+    border-color: var(--vita-primary);
 
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
+    box-shadow: var(--vita-focus-ring);
 
     outline: 0;
   }
@@ -81,20 +85,20 @@
   }
 
   &:has(> :global(.ant-select-status-error)) {
-    border: 1px solid var(--cf-error);
+    border: 1px solid var(--vita-error);
 
     .prefix,
     .suffix {
-      color: var(--cf-error);
+      color: var(--vita-error);
     }
   }
 
   &.legacyHasErrorStatus {
-    border: 1px solid var(--cf-error);
+    border: 1px solid var(--vita-error);
 
     .prefix,
     .suffix {
-      color: var(--cf-error);
+      color: var(--vita-error);
     }
   }
 
@@ -116,162 +120,98 @@
     font-weight: inherit;
     color: inherit !important;
 
-    &:has(> :global(.ant-select-arrow)),
-    &:has(> :global(.ant-select-clear)) {
-      :global(.ant-select-selector) {
-        padding-right: 20px;
-      }
-    }
+    // antd v6 flattened the Select DOM. The chrome that used to be drawn on the
+    // `.ant-select-selector` child — border, background, padding — now lives on the `.ant-select`
+    // root, which is this very element, so it is neutralised here instead of on a descendant.
+    // (`.select`, the outer wrapper, is what actually draws the visible box.)
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
 
-    &.legacyHasArrowOrClear {
-      :global(.ant-select-selector) {
-        padding-right: 20px;
-      }
+    &::after {
+      content: none;
     }
 
-    :global(.ant-select-selector) {
-      width: 100%;
-      height: 100%;
-      padding: 0;
+    // v6 lays the root out with flexbox and keeps the suffix / clear icons in the normal flow,
+    // so the old "reserve 20px on the right for the absolutely positioned arrow" rules — and the
+    // `:has()`-less `legacyHasArrowOrClear` fallback that mirrored them — are no longer needed.
 
-      border: none !important;
-      border-radius: inherit;
+    // v5's `.ant-select-selection-wrap` / `.ant-select-selection-search` collapsed into a single
+    // `.ant-select-content > input.ant-select-input`.
+    :global(.ant-select-content),
+    :global(.ant-select-input) {
+      height: 100%;
 
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
-      color: inherit !important;
-
-      background: transparent !important;
-
-      &::after {
-        content: none;
-      }
-
-      :global(.ant-select-selection-wrap) {
-        height: 100%;
-
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
-      }
-
-      :global(.ant-select-selection-search) {
-        inset-inline-start: 0px;
-        inset-inline-end: 0px;
-
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
-
-        input[type="search"] {
-          height: 100%;
-
-          font-family: inherit;
-          font-size: inherit;
-          font-weight: inherit;
-          color: inherit;
-        }
-      }
+      color: inherit;
+    }
 
-      :global(.ant-select-selection-placeholder) {
-        display: inline-flex;
-        align-items: center;
+    :global(.ant-select-placeholder) {
+      display: inline-flex;
+      align-items: center;
 
-        height: 100%;
+      height: 100%;
 
-        line-height: normal;
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-      }
+      line-height: normal;
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+    }
 
-      :global(.ant-select-selection-item) {
-        padding-inline-end: 0px;
+    // Multiple mode only: `.ant-select-selection-item` is the tag.
+    :global(.ant-select-selection-item) {
+      line-height: normal;
 
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
-      }
+      padding-inline-end: 4px;
 
-      :global(.ant-select-selection-overflow-item) {
-        :global(.ant-select-selection-item) {
-          line-height: normal;
-
-          padding-inline-end: 4px;
-        }
-      }
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
     }
 
-    &:global(.ant-select-focused) {
-      :global(.ant-select-selector) {
-        border: none !important;
+    &:global(.ant-select-focused),
+    &:global(.ant-select-status-error) {
+      border: none !important;
 
-        box-shadow: none !important;
-      }
+      box-shadow: none !important;
     }
 
     &:global(.ant-select-open) {
-      :global(.ant-select-arrow) {
-        transform: rotate(-180deg) translateY(50%);
+      :global(.ant-select-suffix) {
+        // No `translateY(-50%)` companion any more — the suffix sits in the flex flow.
+        transform: rotate(180deg);
       }
 
       &.noArrowAnimation {
-        :global(.ant-select-arrow) {
-          transform: translateY(-50%);
+        :global(.ant-select-suffix) {
+          transform: none;
           transition: none !important;
         }
       }
     }
 
-    &:global(.ant-select-status-error) {
-      :global(.ant-select-selector) {
-        border: none !important;
-      }
-    }
-
-    :global(.ant-select-arrow) {
+    :global(.ant-select-suffix),
+    :global(.ant-select-clear) {
       width: 14px;
       height: 14px;
       margin-top: 0px;
-      inset-inline-end: 0px;
 
       font-size: 14px;
 
       transition: transform 0.3s;
-      transform: translateY(-50%);
 
       pointer-events: all;
     }
 
-    :global(.ant-select-clear) {
-      width: 14px;
-      height: 14px;
-      margin-top: 0px;
-
-      font-size: 14px;
-
-      transform: translateY(-50%);
-
-      inset-inline-end: 0px;
-    }
-
     &:global(.ant-select-multiple) {
-      > :global(.ant-select-selector) {
-        > :global(.ant-select-selection-overflow) {
-          :global(.ant-select-selection-search) {
-            width: 0px !important;
+      // Keep the search input from claiming a slot of its own between the tags.
+      :global(.ant-select-input) {
+        width: 0px !important;
 
-            margin-inline-start: 0px;
-          }
-        }
-
-        > :global(.ant-select-selection-placeholder) {
-          inset-inline-start: 0px;
-        }
+        margin-inline-start: 0px;
       }
     }
   }

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

@@ -1,6 +1,6 @@
 .slider {
   width: 100%;
-  height: 32px;
+  height: var(--vita-control-height);
   margin: 0px;
   padding-block: 0px;
 

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

@@ -3,5 +3,5 @@
 .SwitchWrapper {
   display: inline-flex;
   align-items: center;
-  min-height: 32px;
+  min-height: var(--vita-control-height);
 }

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

@@ -2,10 +2,10 @@
   display: flex;
   align-items: center;
   width: max-content;
-  height: 32px;
-  min-height: 32px;
+  height: var(--vita-control-height);
+  min-height: var(--vita-control-height);
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius-sm);
   overflow: hidden;
 
   .TabBarItem {
@@ -20,13 +20,13 @@
     padding: 0px 15px;
 
     font-size: 14px;
-    color: var(--cf-text);
+    color: var(--vita-foreground);
 
     transition: all 0.3s;
 
     cursor: pointer;
 
-    border: 1px solid var(--cf-border);
+    border: 1px solid var(--vita-border);
 
     &:not(:first-child) {
       margin-left: -1px;
@@ -45,11 +45,11 @@
     }
 
     &:hover {
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
 
     &.active {
-      background: var(--primary-color);
+      background: var(--vita-primary);
 
       color: #fff;
 
@@ -78,12 +78,12 @@
       background: transparent !important;
 
       font-size: 16px !important;
-      color: var(--cf-text) !important;
+      color: var(--vita-foreground) !important;
 
       transition: all 0.2s;
 
       &:hover {
-        color: var(--primary-color) !important;
+        color: var(--vita-primary) !important;
       }
 
       &::after {
@@ -103,10 +103,10 @@
       &.active {
         font-weight: 500;
         font-size: 16px;
-        color: var(--primary-color) !important;
+        color: var(--vita-primary) !important;
 
         &::after {
-          background: var(--primary-color);
+          background: var(--vita-primary);
         }
       }
     }

package/lib/components/Table/_components/Drag/index.js

@@ -6,14 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _sortable = require("@dnd-kit/sortable");
-var _antd = require("antd");
+var _Button = _interopRequireDefault(require("../../../Button"));
 var _utilities = require("@dnd-kit/utilities");
 var _core = require("@dnd-kit/core");
 var _icons = require("@ant-design/icons");
 var _modifiers = require("@dnd-kit/modifiers");
 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; }
+// 用本库的 Button 而不是 antd 原生的：props 类型本来就取的是本库的 ButtonProps，
+// 之前混用导致 variant="surface" 这类本库扩展传不进去。
+
 const RowContext = /*#__PURE__*/_react.default.createContext({});
 const DragHandle = props => {
   const {
@@ -25,7 +29,7 @@ const DragHandle = props => {
     setActivatorNodeRef,
     listeners
   } = (0, _react.useContext)(RowContext);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     type: "text",
     size: "small",
     icon: icon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HolderOutlined, {}),

package/lib/components/Table/_hooks/useTableColumns.js

@@ -167,7 +167,7 @@ const useTableColumns = params => {
           icon: "material-symbols:help",
           className: _indexModule.default.help,
           fontSize: 16,
-          color: "var(--cf-text-3)"
+          color: "var(--vita-subtle-foreground)"
         })
       })]
     });

package/lib/components/Table/_utils/tableUtils.d.ts

@@ -15,7 +15,7 @@ export declare const HELP_TOOLTIP_CONFIG: {
     placement: "top";
     color: string;
     styles: {
-        body: {
+        container: {
             color: string;
             padding: string;
         };

package/lib/components/Table/_utils/tableUtils.js

@@ -39,10 +39,11 @@ function getDepartmentRowSpan(record, index, dataSource, key) {
 const HELP_TOOLTIP_CONFIG = exports.HELP_TOOLTIP_CONFIG = {
   arrow: false,
   placement: "top",
-  color: "var(--cf-subtle)",
+  color: "var(--vita-muted)",
+  // antd v6 renamed Tooltip's `body` slot to `container`
   styles: {
-    body: {
-      color: "var(--cf-text)",
+    container: {
+      color: "var(--vita-foreground)",
       padding: "6px 16px"
     }
   }

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

@@ -1,5 +1,5 @@
 import { ColumnType as AntColumnType, ColumnGroupType as AntColumnGroupType } from "antd/lib/table";
-import { TableProps as AntdTableProps, TooltipProps } from "antd";
+import { Table as AntdTable, TableProps as AntdTableProps, TooltipProps } from "antd";
 import Drag, { DragProps } from "./_components/Drag";
 import { PaginationProps } from "../Pagination";
 import React, { ReactNode } from "react";
@@ -101,6 +101,22 @@ export interface TableProps<RecordType = AnyObject> extends Omit<AntdTableProps<
     showTotal?: false | ((total: number, range: [number, number]) => ReactNode);
     isExpandedCellTable?: boolean;
 }
-type TableFC = (<T extends AnyObject>(props: TableProps<T>) => JSX.Element | null) & React.FC<TableProps<AnyObject>>;
+type TableFC = (<T extends AnyObject>(props: TableProps<T>) => JSX.Element | null) & React.FC<TableProps<AnyObject>> & {
+    /** antd 的 `Table.Summary`，用来渲染合计行 */
+    Summary: typeof AntdTable.Summary;
+    /** antd 的 `Table.Column`，供 JSX 声明列（本库更推荐用 `columns` 属性） */
+    Column: typeof AntdTable.Column;
+    /** antd 的 `Table.ColumnGroup` */
+    ColumnGroup: typeof AntdTable.ColumnGroup;
+    /** 展开列的占位符，放进 `columns` 里可指定展开图标的位置 */
+    EXPAND_COLUMN: typeof AntdTable.EXPAND_COLUMN;
+    /** 选择列的占位符，同上 */
+    SELECTION_COLUMN: typeof AntdTable.SELECTION_COLUMN;
+    SELECTION_ALL: typeof AntdTable.SELECTION_ALL;
+    SELECTION_INVERT: typeof AntdTable.SELECTION_INVERT;
+    SELECTION_NONE: typeof AntdTable.SELECTION_NONE;
+    /** 拖拽排序：`Table.Drag.Handle` 作为拖拽手柄列 */
+    Drag: typeof Drag;
+};
 declare const Table: TableFC;
 export default Table;

package/lib/components/Table/index.js

@@ -236,4 +236,13 @@ const Table = props => {
     })
   });
 };
+Table.Summary = _antd.Table.Summary;
+Table.Column = _antd.Table.Column;
+Table.ColumnGroup = _antd.Table.ColumnGroup;
+Table.EXPAND_COLUMN = _antd.Table.EXPAND_COLUMN;
+Table.SELECTION_COLUMN = _antd.Table.SELECTION_COLUMN;
+Table.SELECTION_ALL = _antd.Table.SELECTION_ALL;
+Table.SELECTION_INVERT = _antd.Table.SELECTION_INVERT;
+Table.SELECTION_NONE = _antd.Table.SELECTION_NONE;
+Table.Drag = _Drag.default;
 var _default = exports.default = Table;

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

@@ -25,10 +25,10 @@
         padding: var(--th-padding);
 
         &:global(.ant-table-column-has-sorters) {
-          background: var(--cf-subtle);
+          background: var(--vita-muted);
 
           &:hover {
-            background: var(--cf-subtle);
+            background: var(--vita-muted);
           }
         }
       }
@@ -61,11 +61,11 @@
 
         // 排序列：antd 会用 bodySortBg 单独给该列的单元格上底色，这里抹掉，
         // 让「哪一列在排序」只由表头的高亮与箭头表达。
-        // 只抹静止态——从前连悬浮态一起抹掉、再补一支 --cf-subtle 回来，
+        // 只抹静止态——从前连悬浮态一起抹掉、再补一支 --vita-muted 回来，
         // 而整行其余单元格走的是 antd 的 rowHoverBg，两支值并不相等（库自带调色板下
         // 是 #fafbfc vs #f6f7f9），悬浮一行时排序列会比其余列深一块、整行裂成两截。
         // 排除掉悬浮态后，该单元格自然落回 antd 的行悬浮规则，与整行始终同色，
-        // 且不依赖消费方是否同步设置了 --cf-subtle / rowHoverBg。
+        // 且不依赖消费方是否同步设置了 --vita-muted / rowHoverBg。
         &:global(.ant-table-column-sort):not(:global(.ant-table-cell-row-hover)) {
           background: transparent;
         }
@@ -74,10 +74,10 @@
       &:global(.ant-table-row-selected) {
         :global(.ant-table-cell) {
           &:global(.ant-table-column-sort) {
-            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+            background: color-mix(in srgb, var(--vita-primary) 12%, transparent);
 
             &:global(.ant-table-cell-row-hover) {
-              background: color-mix(in srgb, var(--primary-color) 22%, transparent);
+              background: color-mix(in srgb, var(--vita-primary) 22%, transparent);
             }
           }
         }
@@ -130,7 +130,7 @@
 
     :global(.ant-checkbox) {
       &:global(.ant-checkbox-checked) {
-        :global(.ant-checkbox-inner) {
+        & {
           &::after {
             top: 45%;
             inset-inline-start: 25%;
@@ -145,7 +145,7 @@
 
   // Table
   .antdTable {
-    border-color: var(--cf-border-weak);
+    border-color: var(--vita-border-weak);
 
     *:not(:global(.ant-table-cell) *) {
       border-color: inherit !important;
@@ -174,7 +174,7 @@
         :global(.ant-table-container) {
           :global(.ant-table-content) {
             > table {
-              border-left: 1px solid var(--cf-border-weak);
+              border-left: 1px solid var(--vita-border-weak);
             }
           }
         }
@@ -239,23 +239,23 @@
         :global(.ant-table-container) {
           > :global(.ant-table-header) {
             > table {
-              border-radius: 6px 6px 0 0;
-              border-left: 1px solid var(--cf-border-weak);
+              border-radius: var(--vita-radius-sm) var(--vita-radius-sm) 0 0;
+              border-left: 1px solid var(--vita-border-weak);
             }
           }
 
           > :global(.ant-table-body) {
             > table {
               border-radius: 0px !important;
-              border-left: 1px solid var(--cf-border-weak);
+              border-left: 1px solid var(--vita-border-weak);
             }
           }
 
           > :global(.ant-table-summary) {
             > table {
               border-radius: 0px !important;
-              border-left: 1px solid var(--cf-border-weak);
-              border-top: 1px solid var(--cf-border-weak);
+              border-left: 1px solid var(--vita-border-weak);
+              border-top: 1px solid var(--vita-border-weak);
             }
           }
         }

package/lib/components/Tags/_components/EllipsisTag/index.js

@@ -36,7 +36,7 @@ const EllipsisTag = props => {
     },
     color: "#fff",
     styles: {
-      body: {
+      container: {
         padding: "6px",
         maxHeight: "300px",
         overflow: "auto"

package/lib/components/TextEllipsis/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _antd = require("antd");
 var _react = require("react");
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _semantic = require("../../utils/semantic");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Default Tooltip width
@@ -168,15 +169,16 @@ const TextEllipsis = ({
     placement: "bottomLeft",
     ...restTooltipConfig,
     title: isOverflow && !disabled ? tooltipTitle : undefined,
-    styles: {
-      body: {
+    styles: (0, _semantic.mergeSemantic)(styles, outer => ({
+      // v5 called this slot `body`; v6 renamed it to `container`
+      container: {
         width: tooltipWidth,
         overflow: "auto",
         maxHeight: "300px",
         whiteSpace: "pre-wrap"
       },
-      ...styles
-    },
+      ...outer
+    })),
     children: content
   });
 };

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

@@ -1,4 +1,4 @@
-import { TreeProps as AntdTreeProps } from "antd";
+import { Tree as AntdTree, TreeProps as AntdTreeProps } from "antd";
 import React, { ReactNode, Key } from "react";
 import { InputProps } from "../Input";
 import { ButtonProps } from "../Button";
@@ -44,5 +44,11 @@ export interface TreeProps extends Omit<AntdTreeProps, "treeData" | "loadData" |
     allowDeselect?: boolean;
     titleSearchBarClassName?: string;
 }
-declare const Tree: React.FC<TreeProps>;
+interface TreeFC extends React.FC<TreeProps> {
+    /** antd 的目录树（带文件夹图标与目录态选中） */
+    DirectoryTree: typeof AntdTree.DirectoryTree;
+    /** antd 的 `Tree.TreeNode`，供 JSX 写法（本库更推荐用 `treeData`） */
+    TreeNode: typeof AntdTree.TreeNode;
+}
+declare const Tree: TreeFC;
 export default Tree;

package/lib/components/Tree/index.js

@@ -215,4 +215,6 @@ const Tree = props => {
     })]
   });
 };
+Tree.DirectoryTree = _antd.Tree.DirectoryTree;
+Tree.TreeNode = _antd.Tree.TreeNode;
 var _default = exports.default = Tree;