@hsu-react/ui 1.0.0 → 2.0.1

package/es/styles/tokens.js

@@ -1,32 +1,180 @@
+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 _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; }
+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); }
 /**
- * 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.
- */
-
-export var 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"
+ * 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.
+ */
+
+import raw from "./tokens.json";
+
+/**
+ * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
+ * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ *
+ * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
+ * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。
+ */
+
+var withLegacy = function withLegacy(t) {
+  return _objectSpread(_objectSpread({}, t), {}, {
+    canvas: t.background,
+    subtle: t.muted,
+    headerBg: t.surface,
+    text: t.foreground,
+    text2: t.mutedForeground,
+    text3: t.subtleForeground,
+    rowHover: t.hover
+  });
 };
-export var 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)"
+export var lightTokens = withLegacy(raw.light);
+export var darkTokens = withLegacy(raw.dark);
+
+/** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+export var defaultPrimaryColor = raw.primary;
+export var radius = raw.radius;
+export var fontTokens = raw.font;
+export var controlTokens = raw.control;
+
+/**
+ * 弹窗宽度尺度。此前各弹窗自己写死（ImportForm 600、SecondConf 800、ModalForm 800/1200），
+ * 没有共同依据；收成一条尺度后至少有据可循。
+ */
+export var modalWidth = raw.modalWidth;
+
+/**
+ * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
+ */
+export var breakpoints = raw.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`。
+ */
+export var withAlpha = function withAlpha(color, alpha) {
+  var hex = color.trim();
+  var short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(hex);
+  var long = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+  if (!short && !long) return color;
+  var _ref = short ? short.slice(1).map(function (c) {
+      return parseInt(c + c, 16);
+    }) : long.slice(1).map(function (c) {
+      return parseInt(c, 16);
+    }),
+    _ref2 = _slicedToArray(_ref, 3),
+    r = _ref2[0],
+    g = _ref2[1],
+    b = _ref2[2];
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+
+/** Opacity of the focus ring; mirrors `--vita-ring` in the generated tokens.scss */
+var 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.
+ */
+export var toAntdTheme = function toAntdTheme(options) {
+  var _options$primaryColor;
+  var t = options !== null && options !== void 0 && options.dark ? darkTokens : lightTokens;
+  var primary = (_options$primaryColor = options === null || options === void 0 ? void 0 : options.primaryColor) !== null && _options$primaryColor !== void 0 ? _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: raw.radius.base,
+    borderRadiusSM: raw.radius.sm,
+    borderRadiusLG: raw.radius.lg,
+    borderRadiusXS: raw.radius.xs,
+    fontFamily: raw.font.family,
+    fontSize: raw.font.size,
+    fontSizeSM: raw.font.sizeSm,
+    fontSizeLG: raw.font.sizeLg,
+    controlHeight: raw.control.height,
+    controlHeightSM: raw.control.heightSm,
+    controlHeightLG: raw.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: raw.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) */
-export var defaultPrimaryColor = "#1677ff";
+/**
+ * 组件级令牌覆盖，补 `toAntdTheme` 里全局令牌覆盖不到的地方。
+ */
+export var toAntdComponents = function toAntdComponents() {
+  return {
+    // 划线：LG(12px) 留给真正的「容器」——弹窗、抽屉、卡片、上传投放区；
+    // 与表单控件同处一行、体量相当的（表格、提示条）跟随基准值 8px，否则同屏两种圆角。
+    Table: {
+      borderRadiusLG: raw.radius.base
+    },
+    Alert: {
+      borderRadiusLG: raw.radius.base
+    },
+    Button: {
+      // antd 的按钮底部有一道 2px 的硬投影（`0 2px 0`），由 controlOutline / controlTmpOutline
+      // 推导而来。shadcn 的按钮没有这个东西；而且既然我们把 controlOutline 调深到 35% 用作
+      // focus ring，这道投影会跟着变成三倍重的一条色带。直接去掉，focus ring 不受影响。
+      defaultShadow: "none",
+      primaryShadow: "none",
+      dangerShadow: "none"
+    }
+  };
+};

package/es/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/es/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/es/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/es/types/antd.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/utils/semantic.js

@@ -0,0 +1,37 @@
+/**
+ * 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 ?? ""}`,
+ * }))}
+ */
+export function mergeSemantic(incoming, merge) {
+  var resolve = function resolve(info) {
+    var _ref;
+    return merge((_ref = typeof incoming === "function" ? incoming(info) : incoming) !== null && _ref !== void 0 ? _ref : {});
+  };
+  return resolve;
+}

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

@@ -1,14 +1,55 @@
 import { ButtonProps as AntdButtonProps } from "antd";
-import React from "react";
-import type { ChakraButtonProps } from "./ChakraButton";
-export type { ChakraButtonProps };
-export interface ButtonProps extends AntdButtonProps {
+import React, { ReactNode } from "react";
+/**
+ * antd v6's own variants plus `surface` — a tinted background *with* a border.
+ *
+ * antd has no such variant: `filled` is tinted but explicitly sets `border-color: transparent`,
+ * and `outlined` has the border but no tint. That combination is the one thing the old
+ * Chakra-backed button was kept around for, so it lives here instead.
+ */
+export type ButtonVariant = NonNullable<AntdButtonProps["variant"]> | "surface";
+export interface ButtonProps extends Omit<AntdButtonProps, "variant"> {
     hasPermi?: string[];
     hidden?: boolean;
+    /**
+     * 图标位置。antd v6 把这个属性改名成了 `iconPlacement`，`iconPosition` 仍然能用但会打
+     * 弃用告警。这里保留旧名（本库一直这么用）并在内部翻成 `iconPlacement`，两个名字都接受。
+     */
     iconPosition?: "start" | "end";
+    variant?: ButtonVariant;
+    /**
+     * @deprecated 用 antd 的 `color`。
+     *
+     * 这是 Chakra 时期的属性名，这里仍然接住并翻译成 `color`，否则它会一路透传到
+     * `<button>` 上，React 会报 “does not recognize the colorPalette prop on a DOM element”。
+     */
+    colorPalette?: "gray" | "blue" | "red" | "green" | "orange";
+    /** Wrap the rendered button, e.g. to put it inside a Tooltip or Popconfirm */
+    reRender?: (btn: React.ReactElement) => ReactNode;
 }
-interface ButtonFC extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> {
-    Chakra: React.FC<ChakraButtonProps>;
-}
-declare const Button: ButtonFC;
+/**
+ * @deprecated use `ButtonProps`.
+ *
+ * There used to be a second button (`Button.Chakra`, later `Button.Basic`) backed by Chakra UI,
+ * brought in because antd v5's Button only had `type` and could not express variants like
+ * outline / subtle / ghost. antd v6 added `color` (16 presets) and `variant`
+ * (`solid | outlined | dashed | filled | text | link`) natively, which is exactly what that button
+ * existed to provide — so it is gone and `Button` is the only button again.
+ *
+ * Mapping from the old props:
+ * | old | new |
+ * | --- | --- |
+ * | `variant="solid"` | `variant="solid"` |
+ * | `variant="outline"` | `variant="outlined"` |
+ * | `variant="surface"` / `"subtle"` | `variant="filled"` |
+ * | `variant="ghost"` | `variant="text"` |
+ * | `variant="plain"` | `variant="link"` |
+ * | `colorPalette="gray"` | `color="default"` |
+ * | `colorPalette="blue" \| "red" \| "green" \| "orange"` | `color="blue" \| "red" \| "green" \| "orange"` |
+ * | `size="xs" \| "sm" \| "md" \| "lg"` | `size="small" \| "small" \| "middle" \| "large"` |
+ */
+export type BasicButtonProps = ButtonProps;
+/** @deprecated use `ButtonProps` — see the note on `BasicButtonProps` */
+export type ChakraButtonProps = ButtonProps;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;