@hsu-react/ui 1.0.0 → 2.0.1

package/lib/styles/tokens.js

@@ -3,36 +3,163 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.lightTokens = exports.defaultPrimaryColor = exports.darkTokens = void 0;
-/**
- * TS constants for the Hsu UI design tokens (for JS-side consumers such as antd themeConfig).
- * The CSS-variable version lives in ./tokens.scss; the two must be kept in sync.
- */
-
-const lightTokens = exports.lightTokens = {
-  canvas: "#f6f7f9",
-  surface: "#ffffff",
-  subtle: "#fafbfc",
-  border: "#e6e8eb",
-  borderWeak: "#eceef1",
-  headerBg: "#ffffff",
-  text: "rgba(0, 0, 0, 0.88)",
-  text2: "rgba(0, 0, 0, 0.45)",
-  text3: "rgba(0, 0, 0, 0.35)",
-  rowHover: "#f6f7f9"
+exports.withAlpha = exports.toAntdTheme = exports.toAntdComponents = exports.radius = exports.modalWidth = exports.lightTokens = exports.fontTokens = exports.defaultPrimaryColor = exports.darkTokens = exports.controlTokens = exports.breakpoints = void 0;
+var _tokens = _interopRequireDefault(require("./tokens.json"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * The JS half of the design-token layer.
+ *
+ * `tokens.json` is the single source of truth. This module types it and maps it onto antd's
+ * `theme.token`; `scripts/gen-tokens-scss.cjs` maps the same file onto the `--vita-*` CSS
+ * variables. Neither half is hand-written against the other, which is what let the previous
+ * tokens.ts / tokens.scss pair drift (their headers literally said "the two must be kept in sync").
+ *
+ * Why antd needs the literal values rather than the CSS variables: `colorPrimary` is run through
+ * @ant-design/colors to derive a 10-step palette, so it has to be a real colour. Handing it
+ * `var(--vita-primary)` produces a palette of garbage. The practical consequence is that changing
+ * the brand colour at runtime cannot be done by overriding the CSS variable alone — go through
+ * `<ConfigProvider primaryColor={...}>`, which sets both halves at once.
+ */
+
+/**
+ * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
+ * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ *
+ * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
+ * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。
+ */
+
+const withLegacy = t => ({
+  ...t,
+  canvas: t.background,
+  subtle: t.muted,
+  headerBg: t.surface,
+  text: t.foreground,
+  text2: t.mutedForeground,
+  text3: t.subtleForeground,
+  rowHover: t.hover
+});
+const lightTokens = exports.lightTokens = withLegacy(_tokens.default.light);
+const darkTokens = exports.darkTokens = withLegacy(_tokens.default.dark);
+
+/** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+const defaultPrimaryColor = exports.defaultPrimaryColor = _tokens.default.primary;
+const radius = exports.radius = _tokens.default.radius;
+const fontTokens = exports.fontTokens = _tokens.default.font;
+const controlTokens = exports.controlTokens = _tokens.default.control;
+
+/**
+ * 弹窗宽度尺度。此前各弹窗自己写死（ImportForm 600、SecondConf 800、ModalForm 800/1200），
+ * 没有共同依据；收成一条尺度后至少有据可循。
+ */
+const modalWidth = exports.modalWidth = _tokens.default.modalWidth;
+
+/**
+ * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
+ */
+const breakpoints = exports.breakpoints = _tokens.default.breakpoint;
+
+/**
+ * `#rgb` / `#rrggbb` → `rgba(...)`. Only used to keep antd's focus ring at the same opacity as
+ * `--vita-ring`; anything it cannot parse is handed back untouched so antd falls back to deriving
+ * the ring itself.
+ */
+/**
+ * 把 hex 颜色加上透明度。传入不是 hex（例如已经是 rgba / CSS 变量）时原样返回，
+ * 让调用方的值照常生效而不是变成 `NaN`。
+ */
+const withAlpha = (color, alpha) => {
+  const hex = color.trim();
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(hex);
+  const long = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+  if (!short && !long) return color;
+  const [r, g, b] = short ? short.slice(1).map(c => parseInt(c + c, 16)) : long.slice(1).map(c => parseInt(c, 16));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-const darkTokens = exports.darkTokens = {
-  canvas: "#131314",
-  surface: "#1c1c1e",
-  subtle: "#232325",
-  border: "rgba(255, 255, 255, 0.12)",
-  borderWeak: "rgba(255, 255, 255, 0.08)",
-  headerBg: "#1c1c1e",
-  text: "rgba(255, 255, 255, 0.85)",
-  text2: "rgba(255, 255, 255, 0.45)",
-  text3: "rgba(255, 255, 255, 0.35)",
-  rowHover: "rgba(255, 255, 255, 0.04)"
+
+/** Opacity of the focus ring; mirrors `--vita-ring` in the generated tokens.scss */
+exports.withAlpha = withAlpha;
+const RING_ALPHA = 0.35;
+
+/**
+ * Build antd's `theme.token` from the same tokens the CSS variables come from, so a component
+ * this library has *not* wrapped still lands on the same palette, radii and type scale as one it
+ * has. This is the lever that keeps the look consistent without wrapping all 75 antd components.
+ */
+const toAntdTheme = options => {
+  const t = options?.dark ? darkTokens : lightTokens;
+  const primary = options?.primaryColor ?? defaultPrimaryColor;
+  return {
+    colorPrimary: primary,
+    colorSuccess: t.success,
+    colorWarning: t.warning,
+    colorError: t.error,
+    colorInfo: primary,
+    colorText: t.foreground,
+    colorTextSecondary: t.mutedForeground,
+    colorTextTertiary: t.subtleForeground,
+    colorTextQuaternary: t.subtleForeground,
+    colorBgContainer: t.surface,
+    colorBgElevated: t.surface,
+    colorBgLayout: t.background,
+    colorBgSpotlight: t.muted,
+    // antd paints table headers / filled controls from the Fill ramp; pointing the top of it at
+    // `muted` is what keeps those surfaces on the zinc scale instead of antd's default greys.
+    colorFillAlter: t.muted,
+    colorFillSecondary: t.muted,
+    colorFillTertiary: t.muted,
+    colorFillQuaternary: t.hover,
+    colorBorder: t.border,
+    colorBorderSecondary: t.borderWeak,
+    borderRadius: _tokens.default.radius.base,
+    borderRadiusSM: _tokens.default.radius.sm,
+    borderRadiusLG: _tokens.default.radius.lg,
+    borderRadiusXS: _tokens.default.radius.xs,
+    fontFamily: _tokens.default.font.family,
+    fontSize: _tokens.default.font.size,
+    fontSizeSM: _tokens.default.font.sizeSm,
+    fontSizeLG: _tokens.default.font.sizeLg,
+    controlHeight: _tokens.default.control.height,
+    controlHeightSM: _tokens.default.control.heightSm,
+    controlHeightLG: _tokens.default.control.heightLg,
+    // shadcn's focus treatment is a 2px ring rather than antd's soft glow. antd would otherwise
+    // derive the ring colour itself at ~10% opacity, which reads visibly lighter than the
+    // `--vita-ring` the wrapped components use — same control, two different focus states.
+    //
+    // 只动 controlOutline 与 colorErrorOutline 这两个「真的是 focus ring」的令牌。
+    // 不要碰 controlTmpOutline —— 它在 antd 里是 colorFillQuaternary（中性填充），
+    // 被 Button 拿去算默认按钮的底部阴影，把它设成错误色会让默认按钮长出一道红边。
+    controlOutlineWidth: _tokens.default.control.ringWidth,
+    controlOutline: withAlpha(primary, RING_ALPHA),
+    colorErrorOutline: withAlpha(t.error, RING_ALPHA),
+    boxShadow: t.shadow2,
+    boxShadowSecondary: t.shadow3,
+    boxShadowTertiary: t.shadow1,
+    // shadcn leans on borders, not gradients or wireframe outlines
+    wireframe: false
+  };
 };
 
-/** Default primary color (initial value of the CSS variable --primary-color; consuming projects may override at runtime) */
-const defaultPrimaryColor = exports.defaultPrimaryColor = "#1677ff";
+/**
+ * 组件级令牌覆盖，补 `toAntdTheme` 里全局令牌覆盖不到的地方。
+ */
+exports.toAntdTheme = toAntdTheme;
+const toAntdComponents = () => ({
+  // 划线：LG(12px) 留给真正的「容器」——弹窗、抽屉、卡片、上传投放区；
+  // 与表单控件同处一行、体量相当的（表格、提示条）跟随基准值 8px，否则同屏两种圆角。
+  Table: {
+    borderRadiusLG: _tokens.default.radius.base
+  },
+  Alert: {
+    borderRadiusLG: _tokens.default.radius.base
+  },
+  Button: {
+    // antd 的按钮底部有一道 2px 的硬投影（`0 2px 0`），由 controlOutline / controlTmpOutline
+    // 推导而来。shadcn 的按钮没有这个东西；而且既然我们把 controlOutline 调深到 35% 用作
+    // focus ring，这道投影会跟着变成三倍重的一条色带。直接去掉，focus ring 不受影响。
+    defaultShadow: "none",
+    primaryShadow: "none",
+    dangerShadow: "none"
+  }
+});
+exports.toAntdComponents = toAntdComponents;

package/lib/styles/tokens.json

@@ -0,0 +1,82 @@
+{
+  "$comment": [
+    "Single source of truth for the Hsu UI design tokens.",
+    "",
+    "Two consumers read this file and must never drift apart:",
+    "  1. scripts/gen-tokens-scss.cjs emits src/styles/tokens.scss (the --vita-* CSS variables)",
+    "  2. src/styles/tokens.ts turns it into antd's `theme.token` object",
+    "",
+    "It is JSON rather than TS precisely so the generator can read it without a TS runtime, and",
+    "it must stay plain values: antd derives 10-step palettes from colorPrimary via",
+    "@ant-design/colors, which needs a real colour — a `var(--vita-primary)` string would break",
+    "the derivation. That is why the CSS-variable layer is generated *from* here and not the",
+    "other way round.",
+    "",
+    "Palette follows shadcn/ui's zinc scale; the brand accent stays configurable."
+  ],
+  "primary": "#1677ff",
+  "light": {
+    "background": "#fafafa",
+    "surface": "#ffffff",
+    "muted": "#f4f4f5",
+    "border": "#e4e4e7",
+    "borderWeak": "#f4f4f5",
+    "foreground": "#09090b",
+    "mutedForeground": "#71717a",
+    "subtleForeground": "#a1a1aa",
+    "hover": "#f4f4f5",
+    "success": "#16a34a",
+    "warning": "#f59e0b",
+    "error": "#ef4444",
+    "shadow1": "0 1px 2px 0 rgba(9, 9, 11, 0.05)",
+    "shadow2": "0 4px 6px -1px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.06)",
+    "shadow3": "0 10px 15px -3px rgba(9, 9, 11, 0.1), 0 4px 6px -4px rgba(9, 9, 11, 0.08)"
+  },
+  "dark": {
+    "background": "#09090b",
+    "surface": "#18181b",
+    "muted": "#27272a",
+    "border": "#27272a",
+    "borderWeak": "#1f1f23",
+    "foreground": "#fafafa",
+    "mutedForeground": "#a1a1aa",
+    "subtleForeground": "#71717a",
+    "hover": "#27272a",
+    "success": "#22c55e",
+    "warning": "#fbbf24",
+    "error": "#f87171",
+    "shadow1": "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
+    "shadow2": "0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4)",
+    "shadow3": "0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5)"
+  },
+  "radius": {
+    "xs": 4,
+    "sm": 6,
+    "base": 8,
+    "lg": 12
+  },
+  "font": {
+    "family": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"PingFang SC\", \"Microsoft YaHei\", Arial, sans-serif",
+    "sizeSm": 12,
+    "size": 14,
+    "sizeLg": 16
+  },
+  "control": {
+    "height": 32,
+    "heightSm": 24,
+    "heightLg": 40,
+    "ringWidth": 2
+  },
+  "modalWidth": {
+    "sm": 600,
+    "md": 800,
+    "lg": 1200
+  },
+  "breakpoint": {
+    "sm": 640,
+    "md": 768,
+    "lg": 1024,
+    "xl": 1280,
+    "xxl": 1536
+  }
+}

package/lib/styles/tokens.scss

@@ -1,62 +1,109 @@
 // =============================================================
-// Hsu UI design tokens (single source of truth)
-// Two value sets, light/dark; dark is activated by html[data-theme="dark"] (Theme toggle in consuming projects)
-// or html[data-prefers-color-scheme="dark"] (dumi docs site).
-// TS-side constants live in ./tokens.ts (for JS consumers such as antd themeConfig); the two must be kept in sync.
+// 本文件由 scripts/gen-tokens-scss.cjs 从 src/styles/tokens.json 生成，请勿手改。
+// 改令牌请改 tokens.json，然后跑 `yarn tokens`（build / prepublish 会自动跑并校验）。
+//
+// 暗色由 html[data-theme="dark"] 激活（消费方主题开关），
+// 或 html[data-prefers-color(-scheme)="dark"]（dumi 文档站）。
 // =============================================================
 
 :root {
-  // ---- Colors - neutral ----
-  --cf-canvas: #f6f7f9; // Page canvas
-  --cf-surface: #ffffff; // Card/panel background
-  --cf-subtle: #fafbfc; // Table header/secondary background
-  --cf-border: #e6e8eb; // Border
-  --cf-border-weak: #eceef1; // Lighter border
-  --cf-text: rgba(0, 0, 0, 0.88);
-  --cf-text-2: rgba(0, 0, 0, 0.45);
-  --cf-text-3: rgba(0, 0, 0, 0.35);
-  --cf-row-hover: #f6f7f9;
-
-  // ---- Colors - brand & functional ----
-  --primary-color: #1677ff; // Default primary color (consuming projects may override at runtime)
-  --cf-success: #52c41a;
-  --cf-warning: #faad14;
-  --cf-error: #ff4d4f;
-
-  // ---- Fonts ----
-  --cf-font-family:
-    PingFangSC-Regular, "PingFang SC", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
-  --cf-font-size-sm: 12px;
-  --cf-font-size: 14px;
-  --cf-font-size-lg: 16px;
-
-  // ---- Border radius ----
-  --cf-radius-sm: 6px;
-  --cf-radius: 8px;
-  --cf-radius-lg: 12px;
-
-  // ---- Shadows (the CF look relies mainly on borders; shadows are for overlays only) ----
-  --cf-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
-  --cf-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
-  --cf-shadow-3: 0 8px 24px rgba(16, 24, 40, 0.12);
+  // ---- 品牌色 ----
+  // 兼容位：2.0 之前消费方就是通过覆盖 --primary-color 换主题色的，
+  // 所以真源反过来引用它，两种写法都生效。
+  --primary-color: #1677ff;
+  --vita-primary: var(--primary-color);
+  --vita-primary-foreground: #ffffff;
+  // focus ring：shadcn 的 2px 环。收成令牌之前各组件各写各的透明度
+  // （6% / 10% / 12% / 20% 都出现过），聚焦态在不同控件上深浅不一。
+  --vita-ring: color-mix(in srgb, var(--vita-primary) 35%, transparent);
+  --vita-ring-error: color-mix(in srgb, var(--vita-error) 30%, transparent);
+  --vita-ring-width: 2px;
+  --vita-focus-ring: 0 0 0 var(--vita-ring-width) var(--vita-ring);
+  --vita-focus-ring-error: 0 0 0 var(--vita-ring-width) var(--vita-ring-error);
+
+  // ---- 中性色（浅色）----
+  --vita-background: #fafafa; // 页面画布
+  --vita-surface: #ffffff; // 卡片 / 面板背景
+  --vita-muted: #f4f4f5; // 次级背景（表头、只读区）
+  --vita-border: #e4e4e7; // 边框
+  --vita-border-weak: #f4f4f5; // 更浅的分隔线
+  --vita-foreground: #09090b; // 主文字
+  --vita-muted-foreground: #71717a; // 次级文字
+  --vita-subtle-foreground: #a1a1aa; // 占位 / 禁用文字
+  --vita-hover: #f4f4f5; // 行 / 项 hover 背景
+  --vita-success: #16a34a;
+  --vita-warning: #f59e0b;
+  --vita-error: #ef4444;
+  --vita-shadow-1: 0 1px 2px 0 rgba(9, 9, 11, 0.05); // 浮层阴影 - 弱
+  --vita-shadow-2: 0 4px 6px -1px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.06); // 浮层阴影 - 中
+  --vita-shadow-3: 0 10px 15px -3px rgba(9, 9, 11, 0.1), 0 4px 6px -4px rgba(9, 9, 11, 0.08); // 浮层阴影 - 强
+
+  // ---- 字体 ----
+  --vita-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
+  --vita-font-size-sm: 12px;
+  --vita-font-size: 14px;
+  --vita-font-size-lg: 16px;
+
+  // ---- 圆角 ----
+  --vita-radius-xs: 4px;
+  --vita-radius-sm: 6px;
+  --vita-radius: 8px;
+  --vita-radius-lg: 12px;
+
+  // ---- 控件高度 ----
+  --vita-control-height: 32px;
+  --vita-control-height-sm: 24px;
+  --vita-control-height-lg: 40px;
+
+  // ---- 断点（媒体查询用不了 CSS 变量，这里只是让 JS 侧与文档能读到同一份值；
+  //      真正的断点判断走 styles/_responsive.scss 的 mixin 或 useBreakpoint）----
+  --vita-screen-sm: 640px;
+  --vita-screen-md: 768px;
+  --vita-screen-lg: 1024px;
+  --vita-screen-xl: 1280px;
+  --vita-screen-xxl: 1536px;
+
+  // ---- 兼容别名（2.0 前的 --cf-*，单向指向新名）----
+  --cf-canvas: var(--vita-background);
+  --cf-surface: var(--vita-surface);
+  --cf-subtle: var(--vita-muted);
+  --cf-border: var(--vita-border);
+  --cf-border-weak: var(--vita-border-weak);
+  --cf-text: var(--vita-foreground);
+  --cf-text-2: var(--vita-muted-foreground);
+  --cf-text-3: var(--vita-subtle-foreground);
+  --cf-row-hover: var(--vita-hover);
+  --cf-success: var(--vita-success);
+  --cf-warning: var(--vita-warning);
+  --cf-error: var(--vita-error);
+  --cf-font-family: var(--vita-font-family);
+  --cf-font-size-sm: var(--vita-font-size-sm);
+  --cf-font-size: var(--vita-font-size);
+  --cf-font-size-lg: var(--vita-font-size-lg);
+  --cf-radius-sm: var(--vita-radius-sm);
+  --cf-radius: var(--vita-radius);
+  --cf-radius-lg: var(--vita-radius-lg);
+  --cf-shadow-1: var(--vita-shadow-1);
+  --cf-shadow-2: var(--vita-shadow-2);
+  --cf-shadow-3: var(--vita-shadow-3);
 }
 
 html[data-theme="dark"],
 html[data-prefers-color="dark"],
 html[data-prefers-color-scheme="dark"] {
-  --cf-canvas: #131314;
-  --cf-surface: #1c1c1e;
-  --cf-subtle: #232325;
-  --cf-border: rgba(255, 255, 255, 0.12);
-  --cf-border-weak: rgba(255, 255, 255, 0.08);
-  --cf-text: rgba(255, 255, 255, 0.85);
-  --cf-text-2: rgba(255, 255, 255, 0.45);
-  --cf-text-3: rgba(255, 255, 255, 0.35);
-  --cf-row-hover: rgba(255, 255, 255, 0.04);
-
-  // Deeper shadows in dark mode (to distinguish overlays from the dark background)
-  --cf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
-  --cf-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
-  --cf-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
+  --vita-background: #09090b;
+  --vita-surface: #18181b;
+  --vita-muted: #27272a;
+  --vita-border: #27272a;
+  --vita-border-weak: #1f1f23;
+  --vita-foreground: #fafafa;
+  --vita-muted-foreground: #a1a1aa;
+  --vita-subtle-foreground: #71717a;
+  --vita-hover: #27272a;
+  --vita-success: #22c55e;
+  --vita-warning: #fbbf24;
+  --vita-error: #f87171;
+  --vita-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  --vita-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
+  --vita-shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
 }

package/lib/types/antd.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Local derivations of antd's internal ref / callback-argument types.
+ *
+ * antd does not re-export these from its package entry, so they used to be pulled straight from
+ * `rc-select` / `rc-picker` / `rc-field-form` / `rc-tree-select` / `rc-upload`. antd v6 moved every
+ * one of those internals to the `@rc-component/*` scope, so importing the old packages now yields
+ * types that are *not the same declarations* antd uses internally — under v6 that surfaces as
+ * `RefObject<T> is not assignable to LegacyRef<T>` when the ref is handed to an antd component.
+ *
+ * Deriving from antd's own public declarations instead means: no runtime dependency, and no need to
+ * list `@rc-component/*` in dependencies and chase antd's version pins — the aliases follow antd
+ * automatically on every upgrade. Each one was checked to be *exactly* equivalent (mutually
+ * assignable) to the original `@rc-component/*` definition.
+ */
+import type React from "react";
+import type { DatePicker, Form, InputNumber, TreeSelect } from "antd";
+import type { TreeSelectProps, UploadProps } from "antd";
+/** Ref exposed by antd `Select` / `AutoComplete` (`@rc-component/select`'s `BaseSelectRef`) */
+export type { RefSelectProps as SelectRef } from "antd/es/select";
+/** Ref exposed by antd `TreeSelect` — also a `BaseSelectRef` */
+export type TreeSelectRef = React.ElementRef<typeof TreeSelect>;
+/** Ref exposed by antd `InputNumber` — an `HTMLInputElement` plus `nativeElement` */
+export type InputNumberRef = React.ElementRef<typeof InputNumber>;
+/** Ref exposed by antd `DatePicker` (`@rc-component/picker`'s `PickerRef`) */
+export type PickerRef = React.ElementRef<typeof DatePicker>;
+/** Ref exposed by antd `DatePicker.RangePicker` (`RangePickerRef`: `PickerRef` without `focus`) */
+export type RangePickerRef = React.ElementRef<typeof DatePicker.RangePicker>;
+/** Ref exposed by antd `Form` — `FormInstance` plus an optional `nativeElement` */
+export type FormRef<Values = any> = React.ElementRef<typeof Form<Values>>;
+/** Argument handed to `Upload`'s `customRequest` (`@rc-component/upload`'s `UploadRequestOption`) */
+export type UploadRequestOption = Parameters<NonNullable<UploadProps["customRequest"]>>[0];
+/** A single node of `TreeSelect`'s `treeData` */
+export type TreeSelectDataNode = NonNullable<TreeSelectProps["treeData"]>[number];
+/** Key type accepted by `TreeSelect` — `React.Key` without `bigint` */
+export type SafeKey = Exclude<React.Key, bigint>;

package/lib/types/antd.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/utils/semantic.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Helpers for antd v6's semantic `classNames` / `styles` props.
+ *
+ * In v5 these were plain objects, so wrappers could merge their own class names with the caller's
+ * by spreading. v6 widened them to `object | ((info) => object)` so a caller can decide per render
+ * — which breaks every `classNames?.header` read in this library.
+ *
+ * Reading only the object branch (or ignoring the function branch) would silently drop whatever a
+ * caller passed as a function. `mergeSemantic` instead always hands antd back the *function* form:
+ * antd calls it, we resolve the caller's value at that moment, and merge our own on top. Both
+ * branches are therefore honoured, and the merge stays lazy just like antd expects.
+ */
+/** The function branch of a semantic prop, e.g. `ModalProps["classNames"]` */
+type SemanticFn<P> = Extract<NonNullable<P>, (...args: never[]) => unknown>;
+/** The resolved object a semantic prop yields, with `undefined` stripped */
+type SemanticValue<P> = NonNullable<ReturnType<SemanticFn<P>>>;
+/**
+ * Merge this library's own semantic slots onto whatever the caller passed.
+ *
+ * @param incoming the caller's `classNames` / `styles` prop, in either form
+ * @param merge receives the caller's resolved slots (`{}` when they passed nothing) and returns the
+ *   merged result — spread `outer` first, then override the slots this component owns
+ *
+ * @example
+ * classNames={mergeSemantic(classNames, (outer) => ({
+ *   ...outer,
+ *   body: `${styles.body} ${outer.body ?? ""}`,
+ * }))}
+ */
+export declare function mergeSemantic<P>(incoming: P, merge: (outer: Partial<SemanticValue<P>>) => SemanticValue<P>): SemanticFn<P>;
+export {};

package/lib/utils/semantic.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeSemantic = mergeSemantic;
+/**
+ * Helpers for antd v6's semantic `classNames` / `styles` props.
+ *
+ * In v5 these were plain objects, so wrappers could merge their own class names with the caller's
+ * by spreading. v6 widened them to `object | ((info) => object)` so a caller can decide per render
+ * — which breaks every `classNames?.header` read in this library.
+ *
+ * Reading only the object branch (or ignoring the function branch) would silently drop whatever a
+ * caller passed as a function. `mergeSemantic` instead always hands antd back the *function* form:
+ * antd calls it, we resolve the caller's value at that moment, and merge our own on top. Both
+ * branches are therefore honoured, and the merge stays lazy just like antd expects.
+ */
+
+/** The function branch of a semantic prop, e.g. `ModalProps["classNames"]` */
+
+/** The resolved object a semantic prop yields, with `undefined` stripped */
+
+/**
+ * Merge this library's own semantic slots onto whatever the caller passed.
+ *
+ * @param incoming the caller's `classNames` / `styles` prop, in either form
+ * @param merge receives the caller's resolved slots (`{}` when they passed nothing) and returns the
+ *   merged result — spread `outer` first, then override the slots this component owns
+ *
+ * @example
+ * classNames={mergeSemantic(classNames, (outer) => ({
+ *   ...outer,
+ *   body: `${styles.body} ${outer.body ?? ""}`,
+ * }))}
+ */
+function mergeSemantic(incoming, merge) {
+  const resolve = info => merge((typeof incoming === "function" ? incoming(info) : incoming) ?? {});
+  return resolve;
+}