@hsu-react/ui 1.0.0 → 2.0.0

package/src/styles/tokens.ts

@@ -1,52 +1,217 @@
 /**
- * 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.
+ * 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 type { ThemeConfig } from "antd";
+
+import raw from "./tokens.json";
 
 export interface HsuThemeTokens {
   /** Page canvas */
-  canvas: string;
-  /** Card/panel background */
+  background: string;
+  /** Card / panel background */
   surface: string;
-  /** Table header/secondary background */
-  subtle: string;
-  /** Border */
+  /** Secondary background (table headers, read-only areas) */
+  muted: string;
   border: string;
-  /** Lighter border */
   borderWeak: string;
-  /** Header bar background */
+  /** Primary text */
+  foreground: string;
+  /** Secondary text */
+  mutedForeground: string;
+  /** Placeholder / disabled text */
+  subtleForeground: string;
+  /** Row / item hover background */
+  hover: string;
+  success: string;
+  warning: string;
+  error: string;
+  shadow1: string;
+  shadow2: string;
+  shadow3: string;
+}
+
+/**
+ * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
+ * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ *
+ * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
+ * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。
+ */
+export interface LegacyThemeTokens {
+  /** @deprecated 用 `background` */
+  canvas: string;
+  /** @deprecated 用 `muted` */
+  subtle: string;
+  /** @deprecated 用 `surface` */
   headerBg: string;
+  /** @deprecated 用 `foreground` */
   text: string;
+  /** @deprecated 用 `mutedForeground` */
   text2: string;
+  /** @deprecated 用 `subtleForeground` */
   text3: string;
+  /** @deprecated 用 `hover` */
   rowHover: string;
 }
 
-export const lightTokens: HsuThemeTokens = {
-  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",
+const withLegacy = (t: HsuThemeTokens): HsuThemeTokens & LegacyThemeTokens => ({
+  ...t,
+  canvas: t.background,
+  subtle: t.muted,
+  headerBg: t.surface,
+  text: t.foreground,
+  text2: t.mutedForeground,
+  text3: t.subtleForeground,
+  rowHover: t.hover,
+});
+
+export const lightTokens = withLegacy(raw.light);
+export const darkTokens = withLegacy(raw.dark);
+
+/** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+export const defaultPrimaryColor: string = raw.primary;
+
+export const radius = raw.radius;
+export const fontTokens = raw.font;
+export const controlTokens = raw.control;
+
+/**
+ * 弹窗宽度尺度。此前各弹窗自己写死（ImportForm 600、SecondConf 800、ModalForm 800/1200），
+ * 没有共同依据；收成一条尺度后至少有据可循。
+ */
+export const modalWidth = raw.modalWidth;
+
+/**
+ * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
+ */
+export const 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 const withAlpha = (color: string, alpha: number): string => {
+  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})`;
 };
 
-export const darkTokens: HsuThemeTokens = {
-  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 */
+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.
+ */
+export const toAntdTheme = (options?: {
+  dark?: boolean;
+  primaryColor?: string;
+}): ThemeConfig["token"] => {
+  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: 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 const defaultPrimaryColor = "#1677ff";
+/**
+ * 组件级令牌覆盖，补 `toAntdTheme` 里全局令牌覆盖不到的地方。
+ */
+export const toAntdComponents = (): ThemeConfig["components"] => ({
+  // 划线：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/src/types/antd.ts

@@ -0,0 +1,46 @@
+/**
+ * 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/src/utils/semantic.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 function mergeSemantic<P>(
+  incoming: P,
+  merge: (outer: Partial<SemanticValue<P>>) => SemanticValue<P>
+): SemanticFn<P> {
+  const resolve = (info: unknown) =>
+    merge(
+      ((typeof incoming === "function"
+        ? (incoming as (i: unknown) => unknown)(info)
+        : incoming) ?? {}) as Partial<SemanticValue<P>>
+    );
+
+  return resolve as SemanticFn<P>;
+}

package/es/components/Button/ChakraButton/index.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-import { ButtonProps } from "@chakra-ui/react";
-export interface ChakraButtonProps extends ButtonProps {
-    hasPermi?: string[];
-    hidden?: boolean;
-    iconPosition?: "start" | "end";
-    icon?: ReactNode;
-    reRender?: (btn: React.ReactElement) => ReactNode;
-}
-declare const ChakraButton: React.FC<ChakraButtonProps>;
-export default ChakraButton;

package/es/components/Button/ChakraButton/index.js

@@ -1,66 +0,0 @@
-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); }
-var _excluded = ["hasPermi", "hidden", "iconPosition", "className", "children", "title", "icon", "reRender"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from "react";
-import { Button } from "@chakra-ui/react";
-import usePermissions from "../../../hooks/usePermissions";
-import styles from "./index.module.scss";
-import classNames from "classnames";
-import ChakraRoot from "../../ChakraRoot";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var ChakraButton = function ChakraButton(props) {
-  var hasPermi = props.hasPermi,
-    hidden = props.hidden,
-    _props$iconPosition = props.iconPosition,
-    iconPosition = _props$iconPosition === void 0 ? "start" : _props$iconPosition,
-    className = props.className,
-    children = props.children,
-    title = props.title,
-    icon = props.icon,
-    reRender = props.reRender,
-    buttonConfig = _objectWithoutProperties(props, _excluded);
-  var _usePermissions = usePermissions(hasPermi),
-    permitted = _usePermissions.permitted;
-  if (!permitted || hidden) {
-    return null;
-  }
-  if (reRender) {
-    return /*#__PURE__*/_jsx(ChakraRoot, {
-      children: reRender( /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
-        className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
-        children: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
-            className: styles.icon,
-            children: icon
-          }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
-            className: styles.icon,
-            children: icon
-          })]
-        })
-      })))
-    });
-  }
-  return /*#__PURE__*/_jsx(ChakraRoot, {
-    children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
-      className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
-      children: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
-          className: styles.icon,
-          children: icon
-        }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
-          className: styles.icon,
-          children: icon
-        })]
-      })
-    }))
-  });
-};
-export default ChakraButton;

package/es/components/Button/ChakraButton/index.module.scss

@@ -1,20 +0,0 @@
-.button {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 4px;
-
-  height: 32px;
-  padding: 0px 12px;
-
-  font-size: 14px;
-  font-weight: normal;
-
-  .icon {
-    font-size: 16px;
-
-    svg {
-      width: max-content;
-      height: max-content;
-    }
-  }
-}

package/es/components/ChakraRoot/index.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-export interface ChakraRootProps {
-    children?: React.ReactNode;
-}
-declare const ChakraRoot: React.FC<ChakraRootProps>;
-export default ChakraRoot;

package/es/components/ChakraRoot/index.js

@@ -1,42 +0,0 @@
-import React from "react";
-import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
-
-/**
- * Provider shell for chakra.
- *
- * These two providers used to be mounted by the consumer at the application entry, wrapping
- * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
- * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
- * that actually uses chakra.
- *
- * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
- * so chakra travels with it), and the consumer entry no longer needs a global provider, which
- * takes chakra out of the initial bundle entirely.
- *
- * Both system and cache are module-level singletons, so wrapping in several places does not
- * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
- * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
- * priority than antd — matching the previous behaviour.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-var cache = createCache({
-  key: "css",
-  prepend: true
-});
-var system = createSystem(defaultConfig, {
-  disableLayers: true,
-  preflight: false
-});
-var ChakraRoot = function ChakraRoot(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_jsx(CacheProvider, {
-    value: cache,
-    children: /*#__PURE__*/_jsx(ChakraProvider, {
-      value: system,
-      children: children
-    })
-  });
-};
-export default ChakraRoot;

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

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-import { ButtonProps } from "@chakra-ui/react";
-export interface ChakraButtonProps extends ButtonProps {
-    hasPermi?: string[];
-    hidden?: boolean;
-    iconPosition?: "start" | "end";
-    icon?: ReactNode;
-    reRender?: (btn: React.ReactElement) => ReactNode;
-}
-declare const ChakraButton: React.FC<ChakraButtonProps>;
-export default ChakraButton;

package/lib/components/Button/ChakraButton/index.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@chakra-ui/react");
-var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
-var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _ChakraRoot = _interopRequireDefault(require("../../ChakraRoot"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ChakraButton = props => {
-  const {
-    hasPermi,
-    hidden,
-    iconPosition = "start",
-    className,
-    children,
-    title,
-    icon,
-    reRender,
-    ...buttonConfig
-  } = props;
-  const {
-    permitted
-  } = (0, _usePermissions.default)(hasPermi);
-  if (!permitted || hidden) {
-    return null;
-  }
-  if (reRender) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChakraRoot.default, {
-      children: reRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
-        ...buttonConfig,
-        className: (0, _classnames.default)(className, _indexModule.default.button, {
-          [_indexModule.default[iconPosition]]: iconPosition
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [iconPosition === "start" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: _indexModule.default.icon,
-            children: icon
-          }), children ?? title, iconPosition === "end" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: _indexModule.default.icon,
-            children: icon
-          })]
-        })
-      }))
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChakraRoot.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
-      ...buttonConfig,
-      className: (0, _classnames.default)(className, _indexModule.default.button, {
-        [_indexModule.default[iconPosition]]: iconPosition
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [iconPosition === "start" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: _indexModule.default.icon,
-          children: icon
-        }), children ?? title, iconPosition === "end" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: _indexModule.default.icon,
-          children: icon
-        })]
-      })
-    })
-  });
-};
-var _default = exports.default = ChakraButton;

package/lib/components/Button/ChakraButton/index.module.scss

@@ -1,20 +0,0 @@
-.button {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 4px;
-
-  height: 32px;
-  padding: 0px 12px;
-
-  font-size: 14px;
-  font-weight: normal;
-
-  .icon {
-    font-size: 16px;
-
-    svg {
-      width: max-content;
-      height: max-content;
-    }
-  }
-}

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

@@ -1,6 +0,0 @@
-import React from "react";
-export interface ChakraRootProps {
-    children?: React.ReactNode;
-}
-declare const ChakraRoot: React.FC<ChakraRootProps>;
-export default ChakraRoot;

package/lib/components/ChakraRoot/index.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@chakra-ui/react");
-var _cache = _interopRequireDefault(require("@emotion/cache"));
-var _react3 = require("@emotion/react");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Provider shell for chakra.
- *
- * These two providers used to be mounted by the consumer at the application entry, wrapping
- * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
- * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
- * that actually uses chakra.
- *
- * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
- * so chakra travels with it), and the consumer entry no longer needs a global provider, which
- * takes chakra out of the initial bundle entirely.
- *
- * Both system and cache are module-level singletons, so wrapping in several places does not
- * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
- * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
- * priority than antd — matching the previous behaviour.
- */const cache = (0, _cache.default)({
-  key: "css",
-  prepend: true
-});
-const system = (0, _react2.createSystem)(_react2.defaultConfig, {
-  disableLayers: true,
-  preflight: false
-});
-const ChakraRoot = ({
-  children
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react3.CacheProvider, {
-  value: cache,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ChakraProvider, {
-    value: system,
-    children: children
-  })
-});
-var _default = exports.default = ChakraRoot;