@tidbcloud/uikit 2.0.0-beta.95 → 2.0.0-beta.97

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.97
+
+### Patch Changes
+
+- feat: make default key exported and add some desc, this is still a PR for the release
+- Feat/search area bug fix ([#364](https://github.com/tidbcloud/tidbcloud-uikit/pull/364))
+- feat: Commit the generated changeset file
+- Feat/search area fix ([#363](https://github.com/tidbcloud/tidbcloud-uikit/pull/363))
+- fix(theme): enhance ActionIcon styles with size and hover effects ([#362](https://github.com/tidbcloud/tidbcloud-uikit/pull/362))
+- fix(theme): add border bottom to Modal header for improved styling consistency ([#361](https://github.com/tidbcloud/tidbcloud-uikit/pull/361))
+
+## 2.0.0-beta.96
+
+### Patch Changes
+
+- fix(Select): update Select component styles to include check icon and… ([#358](https://github.com/tidbcloud/tidbcloud-uikit/pull/358))
+- fix(Tree): update background color from blue to carbon for indeterminate checkbox for improved theme consistency ([#357](https://github.com/tidbcloud/tidbcloud-uikit/pull/357))
+- fix(PageShell): update PageHeader styles to set height instead of margin ([#356](https://github.com/tidbcloud/tidbcloud-uikit/pull/356))
+- fix(ProTable): resizing cursor missing ([#355](https://github.com/tidbcloud/tidbcloud-uikit/pull/355))
+
 ## 2.0.0-beta.95
 
 ### Patch Changes

package/dist/biz/PageShell/index.cjs

@@ -28,7 +28,7 @@ const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps
         {
           paddingLeft: 24,
           paddingRight: 24,
-          marginBottom: 12
+          height: 56
         },
         sticky ? (theme) => ({
           position: "sticky",
@@ -116,4 +116,5 @@ const PageShell = ({
   }
   return page;
 };
+PageShell.Header = PageHeader;
 exports.PageShell = PageShell;

package/dist/biz/PageShell/index.d.cts

@@ -79,4 +79,7 @@ export interface PageShellProps {
     };
     children?: ReactNode;
 }
-export declare const PageShell: ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const PageShell: {
+    ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps): import("react/jsx-runtime.js").JSX.Element;
+    Header: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
+};

package/dist/biz/PageShell/index.d.ts

@@ -79,4 +79,7 @@ export interface PageShellProps {
     };
     children?: ReactNode;
 }
-export declare const PageShell: ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const PageShell: {
+    ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps): import("react/jsx-runtime.js").JSX.Element;
+    Header: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
+};

package/dist/biz/PageShell/index.js

@@ -26,7 +26,7 @@ const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps
         {
           paddingLeft: 24,
           paddingRight: 24,
-          marginBottom: 12
+          height: 56
         },
         sticky ? (theme) => ({
           position: "sticky",
@@ -114,6 +114,7 @@ const PageShell = ({
   }
   return page;
 };
+PageShell.Header = PageHeader;
 export {
   PageShell
 };

package/dist/biz/SearchArea/index.cjs

@@ -132,11 +132,11 @@ function FormItemRender(props) {
       return null;
   }
 }
-const FORM_STATE_KEY = "__fs__";
+const DEFAULT_FORM_STATE_KEY = "__fs__";
 function SearchArea(props) {
   const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
   const [resetSeed, setResetSeed] = React.useState(0);
-  const [formState, setFormState] = useURLQueryState.useURLQueryState(formStateQueryKey ?? FORM_STATE_KEY, defaultValues);
+  const [formState, setFormState] = useURLQueryState.useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
   const state = recoverFromURLEnabled ? formState : defaultValues;
   const form = reactHookForm.useForm({ defaultValues: state });
   const handleSubmit = () => {
@@ -149,6 +149,11 @@ function SearchArea(props) {
     form.reset(defaultValues);
     recoverFromURLEnabled && setFormState(defaultValues);
   };
+  React.useEffect(() => {
+    if (recoverFromURLEnabled) {
+      handleSubmit();
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Form.Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
       data.map((x) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
@@ -162,11 +167,11 @@ function SearchArea(props) {
         x.name
       )),
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(index.Button, { variant: "subtle", color: "carbon.8", onClick: handleReset, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(index.Button, { variant: "subtle", onClick: handleReset, children: [
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.IconEraser, { size: 16, style: { marginRight: 4 } }),
           "Clear Filters"
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { variant: "subtle", color: "carbon.8", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { variant: "subtle", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
       ] })
     ] }) }),
     props.debugEnabled && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: { height: 320 }, children: [
@@ -174,8 +179,9 @@ function SearchArea(props) {
         "result = ",
         JSON.stringify(form.getValues(), null, 4)
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { onClick: () => window.location.reload(), children: "Refresh Page" })
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
     ] })
   ] }) });
 }
+exports.DEFAULT_FORM_STATE_KEY = DEFAULT_FORM_STATE_KEY;
 exports.SearchArea = SearchArea;

package/dist/biz/SearchArea/index.d.cts

@@ -43,5 +43,9 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
      */
     formStateQueryKey?: string;
 }
+/**
+ * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
+ */
+export declare const DEFAULT_FORM_STATE_KEY = "__fs__";
 export declare function SearchArea<T extends object>(props: SearchAreaProps<T>): import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/biz/SearchArea/index.d.ts

@@ -43,5 +43,9 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
      */
     formStateQueryKey?: string;
 }
+/**
+ * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
+ */
+export declare const DEFAULT_FORM_STATE_KEY = "__fs__";
 export declare function SearchArea<T extends object>(props: SearchAreaProps<T>): import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/biz/SearchArea/index.js

@@ -130,11 +130,11 @@ function FormItemRender(props) {
       return null;
   }
 }
-const FORM_STATE_KEY = "__fs__";
+const DEFAULT_FORM_STATE_KEY = "__fs__";
 function SearchArea(props) {
   const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
   const [resetSeed, setResetSeed] = useState(0);
-  const [formState, setFormState] = useURLQueryState(formStateQueryKey ?? FORM_STATE_KEY, defaultValues);
+  const [formState, setFormState] = useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
   const state = recoverFromURLEnabled ? formState : defaultValues;
   const form = useForm({ defaultValues: state });
   const handleSubmit = () => {
@@ -147,6 +147,11 @@ function SearchArea(props) {
     form.reset(defaultValues);
     recoverFromURLEnabled && setFormState(defaultValues);
   };
+  useEffect(() => {
+    if (recoverFromURLEnabled) {
+      handleSubmit();
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
       data.map((x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -160,11 +165,11 @@ function SearchArea(props) {
         x.name
       )),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "subtle", color: "carbon.8", onClick: handleReset, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "subtle", onClick: handleReset, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(IconEraser, { size: 16, style: { marginRight: 4 } }),
           "Clear Filters"
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "subtle", color: "carbon.8", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRefreshCw01, { size: 16 }) }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "subtle", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRefreshCw01, { size: 16 }) }) })
       ] })
     ] }) }),
     props.debugEnabled && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { height: 320 }, children: [
@@ -172,10 +177,11 @@ function SearchArea(props) {
         "result = ",
         JSON.stringify(form.getValues(), null, 4)
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => window.location.reload(), children: "Refresh Page" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
     ] })
   ] }) });
 }
 export {
+  DEFAULT_FORM_STATE_KEY,
   SearchArea
 };

package/dist/biz/Table/ProTable/helpers.cjs

@@ -153,6 +153,9 @@ function mergeProTableProps(props) {
           borderColor: "transparent",
           minWidth: 20,
           minHeight: 20
+        },
+        ".mrt-table-head-cell-resize-handle": {
+          marginRight: -7
         }
       }
     };

package/dist/biz/Table/ProTable/helpers.js

@@ -151,6 +151,9 @@ function mergeProTableProps(props) {
           borderColor: "transparent",
           minWidth: 20,
           minHeight: 20
+        },
+        ".mrt-table-head-cell-resize-handle": {
+          marginRight: -7
         }
       }
     };

package/dist/biz/Tree/index.cjs

@@ -174,7 +174,7 @@ const Tree = React.forwardRef((props, ref) => {
             left: "50%",
             width: 8,
             height: 8,
-            backgroundColor: theme.colors.blue[7],
+            backgroundColor: theme.colors.carbon[8],
             border: 0,
             transform: "translate(-50%, -50%) scale(1)",
             opacity: 1,

package/dist/biz/Tree/index.js

@@ -172,7 +172,7 @@ const Tree = React__default.forwardRef((props, ref) => {
             left: "50%",
             width: 8,
             height: 8,
-            backgroundColor: theme.colors.blue[7],
+            backgroundColor: theme.colors.carbon[8],
             border: 0,
             transform: "translate(-50%, -50%) scale(1)",
             opacity: 1,

package/dist/biz/index.cjs

@@ -41,6 +41,7 @@ exports.CodeBlock = index$1.CodeBlock;
 exports.CopyText = index$1.CopyText;
 exports.PhoneInput = index$2.PhoneInput;
 exports.DotBadge = index$3.DotBadge;
+exports.DEFAULT_FORM_STATE_KEY = index$4.DEFAULT_FORM_STATE_KEY;
 exports.SearchArea = index$4.SearchArea;
 exports.LabelTooltip = index$5.LabelTooltip;
 exports.Tree = index$7.Tree;

package/dist/biz/index.js

@@ -2,7 +2,7 @@ import { Dot } from "./Dot/index.js";
 import { CodeBlock, CopyText } from "./CodeBlock/index.js";
 import { PhoneInput } from "./PhoneInput/index.js";
 import { DotBadge } from "./DotBadge/index.js";
-import { SearchArea } from "./SearchArea/index.js";
+import { DEFAULT_FORM_STATE_KEY, SearchArea } from "./SearchArea/index.js";
 import { LabelTooltip } from "./LabelTooltip/index.js";
 import { Tree } from "./Tree/index.js";
 import { TransferTree } from "./TransferTree/index.js";
@@ -37,6 +37,7 @@ import { DEFAULT_QUICK_RANGES, DEFAULT_TIME_FORMAT, DEFAULT_TIME_FORMAT_WITH_TIM
 export {
   CodeBlock,
   CopyText,
+  DEFAULT_FORM_STATE_KEY,
   DEFAULT_QUICK_RANGES,
   DEFAULT_TIME_FORMAT,
   DEFAULT_TIME_FORMAT_WITH_TIMEZONE,

package/dist/theme/colors.cjs

@@ -2,15 +2,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const carbon = [
   "#FFFFFF",
+  // 0
   "#FDFEFF",
+  // 1
   "#F9FAFB",
+  // 2
   "#EDF1F2",
+  // 3
   "#DCE3E5",
+  // 4
   "#C4CDD0",
+  // 5
   "#9FA9AD",
+  // 6
   "#6F787B",
+  // 7
   "#383E40",
+  // 8
   "#1E2426"
+  // 9
 ];
 const peacock = [
   "#FBFDFE",

package/dist/theme/colors.dark.cjs

@@ -2,15 +2,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const carbon = [
   "#14181A",
+  // 0
   "#111517",
+  // 1
   "#1F2426",
+  // 2
   "#25292B",
+  // 3
   "#313638",
+  // 4
   "#43494D",
+  // 5
   "#50585C",
+  // 6
   "#79848A",
+  // 7
   "#ACB9BF",
+  // 8
   "#DAE2E5"
+  // 9
 ];
 const peacock = [
   "#11171A",

package/dist/theme/colors.dark.js

@@ -1,14 +1,24 @@
 const carbon = [
   "#14181A",
+  // 0
   "#111517",
+  // 1
   "#1F2426",
+  // 2
   "#25292B",
+  // 3
   "#313638",
+  // 4
   "#43494D",
+  // 5
   "#50585C",
+  // 6
   "#79848A",
+  // 7
   "#ACB9BF",
+  // 8
   "#DAE2E5"
+  // 9
 ];
 const peacock = [
   "#11171A",

package/dist/theme/colors.js

@@ -1,14 +1,24 @@
 const carbon = [
   "#FFFFFF",
+  // 0
   "#FDFEFF",
+  // 1
   "#F9FAFB",
+  // 2
   "#EDF1F2",
+  // 3
   "#DCE3E5",
+  // 4
   "#C4CDD0",
+  // 5
   "#9FA9AD",
+  // 6
   "#6F787B",
+  // 7
   "#383E40",
+  // 8
   "#1E2426"
+  // 9
 ];
 const peacock = [
   "#FBFDFE",

package/dist/theme/theme.cjs

@@ -548,7 +548,8 @@ const theme = createTheme.createTheme({
     Select: {
       defaultProps: {
         size: "md",
-        withCheckIcon: false
+        withCheckIcon: true,
+        checkIconPosition: "right"
       },
       styles: (theme2, props) => {
         return {
@@ -589,6 +590,11 @@ const theme = createTheme.createTheme({
               backgroundColor: "transparent",
               "&:hover": {
                 backgroundColor: themeColor(theme2, "carbon", 3)
+              },
+              // check icon color
+              "& > svg": {
+                color: themeColor(theme2, "carbon", 9),
+                opacity: 1
               }
             }
           },
@@ -596,6 +602,10 @@ const theme = createTheme.createTheme({
             "& > svg": {
               color: `${themeColor(theme2, "carbon", 7)} !important`
             }
+          },
+          dropdown: {
+            "--popover-border-color": themeColor(theme2, "carbon", 3),
+            "--popover-shadow": "0px 8px 32px 0px #00000014"
           }
         };
       }
@@ -803,7 +813,8 @@ const theme = createTheme.createTheme({
           borderTopRightRadius: theme2.defaultRadius,
           padding: "16px 16px 16px 24px",
           margin: 0,
-          backgroundColor: themeColor(theme2, "carbon", 1)
+          backgroundColor: themeColor(theme2, "carbon", 1),
+          borderBottom: `1px solid ${themeColor(theme2, "carbon", 4)}`
         },
         title: {
           fontWeight: 700,
@@ -979,7 +990,8 @@ const theme = createTheme.createTheme({
     ActionIcon: {
       defaultProps: {
         variant: "subtle",
-        color: "carbon"
+        color: "carbon",
+        size: "md"
       },
       styles(theme2, props) {
         const color = props.color ?? theme2.primaryColor;
@@ -1007,14 +1019,18 @@ const theme = createTheme.createTheme({
           },
           transparent: {
             backgroundColor: "transparent",
-            color: themeColor(theme2, color, shade)
+            color: themeColor(theme2, color, shade),
+            "&:hover": {
+              color: themeColor(theme2, color, shade)
+            }
           },
           subtle: {
             backgroundColor: "transparent",
             color: themeColor(theme2, color, 8),
             borderColor: "transparent",
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 3)
+              backgroundColor: themeColor(theme2, color, 3),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 4)
@@ -1031,18 +1047,23 @@ const theme = createTheme.createTheme({
             color: themeColor(theme2, color, shade),
             border: `1px solid ${themeColor(theme2, color, 4)}`,
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 2)
+              backgroundColor: themeColor(theme2, color, 2),
+              color: themeColor(theme2, color, shade)
             }
           },
           filled: {
             backgroundColor: themeColor(theme2, color, color.includes("carbon") ? 9 : 7),
-            color: theme2.white
+            color: theme2.white,
+            "&:hover": {
+              color: theme2.white
+            }
           },
           light: {
             backgroundColor: themeColor(theme2, color, 3),
             color: themeColor(theme2, color, 8),
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 4)
+              backgroundColor: themeColor(theme2, color, 4),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 5)
@@ -1061,10 +1082,7 @@ const theme = createTheme.createTheme({
         return {
           root: {
             ...variantStyle,
-            width: size,
-            height: size,
-            minWidth: size,
-            minHeight: size
+            "--ai-size": size
           }
         };
       }

package/dist/theme/theme.js

@@ -546,7 +546,8 @@ const theme = createTheme({
     Select: {
       defaultProps: {
         size: "md",
-        withCheckIcon: false
+        withCheckIcon: true,
+        checkIconPosition: "right"
       },
       styles: (theme2, props) => {
         return {
@@ -587,6 +588,11 @@ const theme = createTheme({
               backgroundColor: "transparent",
               "&:hover": {
                 backgroundColor: themeColor(theme2, "carbon", 3)
+              },
+              // check icon color
+              "& > svg": {
+                color: themeColor(theme2, "carbon", 9),
+                opacity: 1
               }
             }
           },
@@ -594,6 +600,10 @@ const theme = createTheme({
             "& > svg": {
               color: `${themeColor(theme2, "carbon", 7)} !important`
             }
+          },
+          dropdown: {
+            "--popover-border-color": themeColor(theme2, "carbon", 3),
+            "--popover-shadow": "0px 8px 32px 0px #00000014"
           }
         };
       }
@@ -801,7 +811,8 @@ const theme = createTheme({
           borderTopRightRadius: theme2.defaultRadius,
           padding: "16px 16px 16px 24px",
           margin: 0,
-          backgroundColor: themeColor(theme2, "carbon", 1)
+          backgroundColor: themeColor(theme2, "carbon", 1),
+          borderBottom: `1px solid ${themeColor(theme2, "carbon", 4)}`
         },
         title: {
           fontWeight: 700,
@@ -977,7 +988,8 @@ const theme = createTheme({
     ActionIcon: {
       defaultProps: {
         variant: "subtle",
-        color: "carbon"
+        color: "carbon",
+        size: "md"
       },
       styles(theme2, props) {
         const color = props.color ?? theme2.primaryColor;
@@ -1005,14 +1017,18 @@ const theme = createTheme({
           },
           transparent: {
             backgroundColor: "transparent",
-            color: themeColor(theme2, color, shade)
+            color: themeColor(theme2, color, shade),
+            "&:hover": {
+              color: themeColor(theme2, color, shade)
+            }
           },
           subtle: {
             backgroundColor: "transparent",
             color: themeColor(theme2, color, 8),
             borderColor: "transparent",
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 3)
+              backgroundColor: themeColor(theme2, color, 3),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 4)
@@ -1029,18 +1045,23 @@ const theme = createTheme({
             color: themeColor(theme2, color, shade),
             border: `1px solid ${themeColor(theme2, color, 4)}`,
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 2)
+              backgroundColor: themeColor(theme2, color, 2),
+              color: themeColor(theme2, color, shade)
             }
           },
           filled: {
             backgroundColor: themeColor(theme2, color, color.includes("carbon") ? 9 : 7),
-            color: theme2.white
+            color: theme2.white,
+            "&:hover": {
+              color: theme2.white
+            }
           },
           light: {
             backgroundColor: themeColor(theme2, color, 3),
             color: themeColor(theme2, color, 8),
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 4)
+              backgroundColor: themeColor(theme2, color, 4),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 5)
@@ -1059,10 +1080,7 @@ const theme = createTheme({
         return {
           root: {
             ...variantStyle,
-            width: size,
-            height: size,
-            minWidth: size,
-            minHeight: size
+            "--ai-size": size
           }
         };
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.95",
+  "version": "2.0.0-beta.97",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",