type: typeScript definition improvement

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.dumi/theme/common/VersionUpgrade/index.tsx

@@ -29,13 +29,13 @@ const VersionUpgradeModal = () => {
   const [locale, lang] = useLocale(locales);
   const { pathname } = useLocation();
 
-  const [open, updateOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
 
   const isCN = lang === 'cn' || utils.isZhCN(pathname);
 
   function handleClose() {
     localStorage.setItem(STORAGE_KEY, Date.now().toString());
-    updateOpen(false);
+    setOpen(false);
   }
 
   React.useEffect(() => {
@@ -48,7 +48,7 @@ const VersionUpgradeModal = () => {
 
     if (!lastTime) {
       const timer = setTimeout(() => {
-        updateOpen(true);
+        setOpen(true);
       }, 1000);
 
       return () => {

AGENTS.md

@@ -343,7 +343,7 @@ export const prepareComponentToken: GetDefaultToken<'ComponentName'> = (token) =
 });
 
 // 3. 样式生成函数
-const genComponentStyle: GenerateStyle<ComponentToken> = (token) => {
+const genComponentStyle: GenerateStyle<ComponentToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {
@@ -767,9 +767,14 @@ export const prepareComponentToken: GetDefaultToken<'ComponentName'> = (token) =
   componentPadding: token.paddingXS,
 });
 
-const genComponentStyle: GenerateStyle<ComponentToken> = (token) => {
+const genComponentStyle: GenerateStyle<ComponentToken, CSSObject> = (token) => {
   const { componentCls, fontSize, padding } = token;
-  return { [componentCls]: { fontSize, padding } };
+  return {
+    [componentCls]: {
+      fontSize,
+      padding,
+    },
+  };
 };
 
 export default genStyleHooks(
@@ -837,10 +842,8 @@ export default genStyleHooks(
    - **组件名不用反引号**：组件名（如 Modal、Drawer、Button、Upload.Dragger）不使用 `` ` `` 包裹；属性名、API、token 等仍用反引号
 
 3. **中英文条目句式**：
-   - **中文**：`Emoji 组件名 动词/描述 … [#PR](链接) [@贡献者]`  
-     例：`🐞 Button 修复暗色主题下 \`color\` 的 \`hover\` 与 \`active\` 状态颜色相反的问题。`
-   - **英文**：`Emoji 动词 组件名 描述 … [#PR](链接) [@贡献者]`（动词在前，如 Fix / Add / Support / Remove / Disable / Refactor / Improve / Change）  
-     例：`🐞 Fix Button reversed \`hover\` and \`active\` colors for \`color\` in dark theme.`
+   - **中文**：`Emoji 组件名 动词/描述 … [#PR](链接) [@贡献者]` 例：`🐞 Button 修复暗色主题下 \`color\` 的 \`hover\` 与 \`active\` 状态颜色相反的问题。`
+   - **英文**：`Emoji 动词 组件名 描述 … [#PR](链接) [@贡献者]`（动词在前，如 Fix / Add / Support / Remove / Disable / Refactor / Improve / Change）例：`🐞 Fix Button reversed \`hover\` and \`active\` colors for \`color\` in dark theme.`
 
 4. **分组逻辑**：
    - **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列，子条中仍须包含组件名

components/_util/wave/WaveEffect.tsx

@@ -34,7 +34,7 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
   const [varName] = genCssVar(rootPrefixCls, 'wave');
 
   // ===================== Effect =====================
-  const [color, setWaveColor] = React.useState<string | null>(null);
+  const [waveColor, setWaveColor] = React.useState<string | null>(null);
   const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
   const [left, setLeft] = React.useState(0);
   const [top, setTop] = React.useState(0);
@@ -50,8 +50,8 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
     borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
   };
 
-  if (color) {
-    waveStyle[varName('color')] = color;
+  if (waveColor) {
+    waveStyle[varName('color')] = waveColor;
   }
 
   function syncPos() {

components/_util/wave/style.ts

@@ -1,3 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import { genComponentStyleHook } from '../../theme/internal';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genCssVar } from '../../theme/util/genStyleUtils';
@@ -7,7 +9,7 @@ export interface ComponentToken {}
 
 export interface WaveToken extends FullToken<'Wave'> {}
 
-const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
+const genWaveStyle: GenerateStyle<WaveToken, CSSObject> = (token) => {
   const {
     componentCls,
     colorPrimary,

components/affix/style/index.ts

@@ -1,5 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
@@ -16,7 +14,7 @@ interface AffixToken extends FullToken<'Affix'> {
 }
 
 // ============================== Shared ==============================
-const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
+const genSharedAffixStyle: GenerateStyle<AffixToken> = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {

components/alert/style/index.ts

@@ -43,7 +43,7 @@ const genAlertTypeStyle = (
   },
 });
 
-export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
+export const genBaseStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   const {
     componentCls,
     motionDurationSlow: duration,
@@ -142,7 +142,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
   };
 };
 
-export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
+export const genTypeStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   const {
     componentCls,
 
@@ -191,7 +191,7 @@ export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
   };
 };
 
-export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
+export const genActionStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   const {
     componentCls,
     iconCls,

components/anchor/style/index.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent, textEllipsis } from '../../style';
@@ -45,7 +46,7 @@ interface AnchorToken extends FullToken<'Anchor'> {
 }
 
 // ============================== Shared ==============================
-const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token) => {
+const genSharedAnchorStyle: GenerateStyle<AnchorToken, CSSObject> = (token) => {
   const {
     componentCls,
     holderOffsetBlock,
@@ -131,7 +132,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token) => {
   };
 };
 
-const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token) => {
+const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken, CSSObject> = (token) => {
   const { componentCls, motionDurationSlow, lineWidthBold, colorPrimary } = token;
 
   return {

components/app/style/index.ts

@@ -1,3 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
@@ -7,7 +9,7 @@ export interface ComponentToken {}
 interface AppToken extends FullToken<'App'> {}
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<AppToken> = (token) => {
+const genBaseStyle: GenerateStyle<AppToken, CSSObject> = (token) => {
   const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token;
   return {
     [componentCls]: {

components/avatar/style/index.ts

@@ -78,7 +78,7 @@ type AvatarToken = FullToken<'Avatar'> & {
   avatarColor: string;
 };
 
-const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
+const genBaseStyle: GenerateStyle<AvatarToken, CSSObject> = (token) => {
   const {
     antCls,
     componentCls,
@@ -168,7 +168,7 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
   };
 };
 
-const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
+const genGroupStyle: GenerateStyle<AvatarToken, CSSObject> = (token) => {
   const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token;
 
   return {

components/back-top/style/index.ts

@@ -65,7 +65,7 @@ type BackTopToken = FullToken<'BackTop'> & {
 };
 
 // ============================== Shared ==============================
-const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): CSSObject => {
+const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token) => {
   const { componentCls, backTopFontSize, backTopSize, zIndexPopup } = token;
 
   return {
@@ -109,7 +109,7 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
   };
 };
 
-const genMediaBackTopStyle: GenerateStyle<BackTopToken> = (token): CSSObject => {
+const genMediaBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token) => {
   const { componentCls, screenMD, screenXS, backTopInlineEndMD, backTopInlineEndXS } = token;
   return {
     [`@media (max-width: ${unit(screenMD)})`]: {

components/badge/style/index.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
@@ -139,7 +140,7 @@ const antBadgeLoadingCircle = new Keyframes('antBadgeLoadingCircle', {
   },
 });
 
-const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
+const genSharedBadgeStyle: GenerateStyle<BadgeToken, CSSObject> = (token) => {
   const {
     componentCls,
     iconCls,
@@ -372,7 +373,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => BadgeToken = (token) => {
+export const prepareToken = (token: Parameters<GenStyleFn<'Badge'>>[0]) => {
   const { fontHeight, lineWidth, marginXS, colorBorderBg } = token;
 
   const badgeFontHeight = fontHeight;

components/badge/style/ribbon.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { prepareComponentToken, prepareToken } from '.';
@@ -7,7 +8,7 @@ import type { GenerateStyle } from '../../theme/internal';
 import { genPresetColor, genStyleHooks } from '../../theme/internal';
 
 // ============================== Ribbon ==============================
-const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
+const genRibbonStyle: GenerateStyle<BadgeToken, CSSObject> = (token) => {
   const { antCls, badgeFontHeight, marginXS, badgeRibbonOffset, calc } = token;
   const ribbonPrefixCls = `${antCls}-ribbon`;
   const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;

components/button/Button.tsx

@@ -225,7 +225,7 @@ const InternalCompoundedButton = React.forwardRef<
 
   const loadingOrDelay = useMemo<LoadingConfigType>(() => getLoadingConfig(loading), [loading]);
 
-  const [innerLoading, setLoading] = useState<boolean>(loadingOrDelay.loading);
+  const [innerLoading, setInnerLoading] = useState<boolean>(loadingOrDelay.loading);
 
   const [hasTwoCNChar, setHasTwoCNChar] = useState<boolean>(false);
 
@@ -255,10 +255,10 @@ const InternalCompoundedButton = React.forwardRef<
     if (loadingOrDelay.delay > 0) {
       delayTimer = setTimeout(() => {
         delayTimer = null;
-        setLoading(true);
+        setInnerLoading(true);
       }, loadingOrDelay.delay);
     } else {
-      setLoading(loadingOrDelay.loading);
+      setInnerLoading(loadingOrDelay.loading);
     }
 
     function cleanupTimer() {

components/button/style/index.ts

@@ -2,6 +2,7 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetIcon } from '../../style';
+import { genNoMotionStyle } from '../../style/motion';
 import type { GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genGroupStyle from './group';
@@ -12,7 +13,7 @@ import genVariantStyle from './variant';
 export type { ComponentToken };
 
 // ============================== Shared ==============================
-const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
+const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
   const {
     componentCls,
     iconCls,
@@ -40,7 +41,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
       transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
       userSelect: 'none',
       touchAction: 'manipulation',
-
+      ...genNoMotionStyle(),
       '&:disabled > *': {
         pointerEvents: 'none',
       },
@@ -80,7 +81,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
 
       [`${componentCls}-loading-icon`]: {
         transition: ['width', 'opacity', 'margin']
-          .map((transition) => `${transition} ${motionDurationSlow} ${motionEaseInOut}`)
+          .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
           .join(','),
       },
 
@@ -210,7 +211,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   return genButtonStyle(largeToken, `${token.componentCls}-lg`);
 };
 
-const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
+const genBlockButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {

components/button/style/token.ts

@@ -283,9 +283,7 @@ export interface ButtonToken
   buttonIconOnlyFontSize: number | string;
 }
 
-export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
-  token,
-) => {
+export const prepareToken = (token: Parameters<GenStyleFn<'Button'>>[0]) => {
   const { paddingInline, onlyIconSize, borderColorDisabled } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
@@ -310,7 +308,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
     : '#fff';
 
   const shadowColorTokens = PresetColors.reduce<CSSObject>(
-    (prev: CSSObject, colorKey: PresetColorKey) => ({
+    (prev, colorKey) => ({
       ...prev,
       [`${colorKey}ShadowColor`]: `0 ${unit(token.controlOutlineWidth)} 0 ${getAlphaColor(token[`${colorKey}1`], token.colorBgContainer)}`,
     }),

components/button/style/variant.ts

@@ -1,9 +1,11 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import { PresetColors } from '../../theme/interface';
 import type { GenerateStyle } from '../../theme/interface';
 import { genCssVar } from '../../theme/util/genStyleUtils';
 import type { ButtonToken } from './token';
 
-const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
+const genVariantStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
   const { componentCls, antCls, lineWidth } = token;
 
   const [varName, varRef] = genCssVar(antCls, 'btn');

components/calendar/demo/lunar.tsx

@@ -99,7 +99,7 @@ const App: React.FC = () => {
   const { styles } = useStyle({ test: true });
 
   const [selectDate, setSelectDate] = React.useState<Dayjs>(() => dayjs());
-  const [panelDateDate, setPanelDate] = React.useState<Dayjs>(() => dayjs());
+  const [panelDate, setPanelDate] = React.useState<Dayjs>(() => dayjs());
 
   const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
@@ -131,7 +131,7 @@ const App: React.FC = () => {
             <span
               className={clsx({
                 [styles.weekend]: isWeekend,
-                gray: !panelDateDate.isSame(date, 'month'),
+                gray: !panelDate.isSame(date, 'month'),
               })}
             >
               {date.get('date')}

components/calendar/style/index.ts

@@ -8,7 +8,7 @@ import {
   initPickerPanelToken,
 } from '../../date-picker/style';
 import { resetComponent } from '../../style';
-import type { FullToken, GetDefaultToken } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -67,7 +67,7 @@ interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelCo
   dateContentHeight: number | string;
 }
 
-export const genCalendarStyles = (token: CalendarToken): CSSObject => {
+export const genCalendarStyles: GenerateStyle<CalendarToken, CSSObject> = (token) => {
   const { calendarCls, componentCls, fullBg, fullPanelBg, itemActiveBg } = token;
   return {
     [calendarCls]: {

components/carousel/style/index.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
@@ -48,7 +49,7 @@ interface CarouselToken extends FullToken<'Carousel'> {}
 
 export const DotDuration = '--dot-duration';
 
-const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
+const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
   return {

components/cascader/demo/placement.tsx

@@ -44,12 +44,12 @@ const options: Option[] = [
 ];
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(
+  const [placement, setPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(
     'topLeft',
   );
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (

components/cascader/style/columns.ts

@@ -6,7 +6,7 @@ import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { textEllipsis } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 
-const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSInterpolation => {
+const getColumnsStyle: GenerateStyle<CascaderToken, CSSInterpolation> = (token) => {
   const { prefixCls, componentCls } = token;
 
   const cascaderMenuItemCls = `${componentCls}-menu-item`;

components/cascader/style/index.ts

@@ -96,7 +96,6 @@ export const prepareComponentToken = (token: GlobalToken) => {
   const itemPaddingVertical = Math.round(
     (token.controlHeight - token.fontSize * token.lineHeight) / 2,
   );
-
   return {
     controlWidth: 184,
     controlItemWidth: 111,

components/cascader/style/panel.ts

@@ -8,7 +8,7 @@ import type { GenerateStyle } from '../../theme/internal';
 import getColumnsStyle from './columns';
 
 // ============================== Panel ===============================
-const genPanelStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSObject => {
+const genPanelStyle: GenerateStyle<CascaderToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

components/checkbox/style/index.ts

@@ -1,6 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusOutline, resetComponent } from '../../style';
+import { genNoMotionStyle } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
@@ -99,6 +100,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         borderRadius: token.borderRadiusSM,
         borderCollapse: 'separate',
         transition: `all ${token.motionDurationSlow}`,
+        ...genNoMotionStyle(),
 
         // Checkmark
         '&:after': {
@@ -116,6 +118,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
           opacity: 0,
           content: '""',
           transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`,
+          ...genNoMotionStyle(),
         },
 
         // Wrapper > Checkbox > input
@@ -173,6 +176,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
           opacity: 1,
           transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
           transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
+          ...genNoMotionStyle(),
         },
 
         // Hover on checked checkbox directly

components/collapse/style/index.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetComponent, resetIcon } from '../../style';
@@ -59,7 +60,7 @@ type CollapseToken = FullToken<'Collapse'> & {
   collapsePanelBorderRadius: number;
 };
 
-export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
+export const genBaseStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const {
     componentCls,
     contentBg,
@@ -269,7 +270,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
   };
 };
 
-const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
+const genArrowStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow`;
@@ -283,7 +284,7 @@ const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
   };
 };
 
-const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
+const genBorderlessStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const { componentCls, headerBg, borderlessContentPadding, borderlessContentBg, colorBorder } =
     token;
 
@@ -319,7 +320,7 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
   };
 };
 
-const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
+const genGhostStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const { componentCls, paddingSM } = token;
 
   return {

components/color-picker/style/index.ts

@@ -76,7 +76,7 @@ export const genActiveStyle = (
   outline: 0,
 });
 
-const genRtlStyle = (token: ColorPickerToken): CSSObject => {
+const genRtlStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     '&-rtl': {
@@ -133,7 +133,7 @@ const genClearStyle = (
   };
 };
 
-const genStatusStyle = (token: ColorPickerToken): CSSObject => {
+const genStatusStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     colorError,
@@ -164,7 +164,7 @@ const genStatusStyle = (token: ColorPickerToken): CSSObject => {
     },
   };
 };
-const genSizeStyle = (token: ColorPickerToken): CSSObject => {
+const genSizeStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     controlHeightLG,

components/config-provider/demo/locale.tsx

@@ -225,11 +225,11 @@ const Page: React.FC = () => {
 };
 
 const App: React.FC = () => {
-  const [locale, setLocal] = useState<Locale>(enUS);
+  const [locale, setLocale] = useState<Locale>(enUS);
 
   const changeLocale = (e: RadioChangeEvent) => {
     const localeValue = e.target.value;
-    setLocal(localeValue);
+    setLocale(localeValue);
     if (!localeValue) {
       dayjs.locale('en');
     } else {

components/date-picker/demo/placement.tsx

@@ -5,10 +5,10 @@ import { DatePicker, Radio } from 'antd';
 const { RangePicker } = DatePicker;
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<DatePickerProps['placement']>('topLeft');
+  const [placement, setPlacement] = useState<DatePickerProps['placement']>('topLeft');
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (

components/date-picker/style/index.ts

@@ -30,7 +30,7 @@ const genPickerPadding = (paddingBlock: number, paddingInline: number): CSSObjec
   };
 };
 
-const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
+const genPickerStatusStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
   const { componentCls, colorError, colorWarning } = token;
 
   return {

components/date-picker/style/panel.ts

@@ -5,7 +5,7 @@ import { FastColor } from '@ant-design/fast-color';
 import type { GenerateStyle } from '../../theme/internal';
 import type { PickerToken, SharedPickerToken } from './token';
 
-const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
+const genPickerCellInnerStyle: GenerateStyle<SharedPickerToken, CSSObject> = (token) => {
   const {
     pickerCellCls,
     pickerCellInnerCls,
@@ -141,7 +141,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
   };
 };
 
-export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
+export const genPanelStyle: GenerateStyle<SharedPickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     pickerCellCls,
@@ -625,7 +625,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
   };
 };
 
-const genPickerPanelStyle: GenerateStyle<PickerToken> = (token) => {
+const genPickerPanelStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     textHeight,

components/date-picker/style/variants.ts

@@ -7,9 +7,10 @@ import {
   genOutlinedStyle,
   genUnderlinedStyle,
 } from '../../input/style/variants';
+import type { GenerateStyle } from '../../theme/interface';
 import type { PickerToken } from './token';
 
-const genVariantsStyle = (token: PickerToken): CSSObject => {
+const genVariantsStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

components/descriptions/style/index.ts

@@ -62,7 +62,7 @@ export interface ComponentToken {
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {}
 
-const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
+const genBorderedStyle: GenerateStyle<DescriptionsToken, CSSObject> = (token) => {
   const { componentCls, labelBg } = token;
   return {
     [`&${componentCls}-bordered`]: {
@@ -118,7 +118,7 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
   };
 };
 
-const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
+const genDescriptionStyles: GenerateStyle<DescriptionsToken, CSSObject> = (token) => {
   const {
     componentCls,
     extraColor,

components/divider/style/index.ts

@@ -43,7 +43,7 @@ interface DividerToken extends FullToken<'Divider'> {
 }
 
 // ============================== Size ================================
-const genSizeDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
+const genSizeDividerStyle: GenerateStyle<DividerToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {
@@ -63,7 +63,7 @@ const genSizeDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
 };
 
 // ============================== Shared ==============================
-const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
+const genSharedDividerStyle: GenerateStyle<DividerToken, CSSObject> = (token) => {
   const {
     componentCls,
     sizePaddingEdgeHorizontal,

components/drawer/demo/style-class.tsx

@@ -54,8 +54,8 @@ const stylesFn: DrawerProps['styles'] = (info) => {
 };
 
 const App: React.FC = () => {
-  const [drawerOpen, setOpen] = useState(false);
-  const [drawerFnOpen, setFnOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerFnOpen, setDrawerFnOpen] = useState(false);
 
   const sharedProps: DrawerProps = {
     classNames,
@@ -65,7 +65,7 @@ const App: React.FC = () => {
   const footer: React.ReactNode = (
     <Flex gap="middle" justify="flex-end">
       <Button
-        onClick={() => setFnOpen(false)}
+        onClick={() => setDrawerFnOpen(false)}
         styles={{ root: { borderColor: '#ccc', color: '#171717', backgroundColor: '#fff' } }}
       >
         Cancel
@@ -73,7 +73,7 @@ const App: React.FC = () => {
       <Button
         type="primary"
         styles={{ root: { backgroundColor: '#171717' } }}
-        onClick={() => setOpen(true)}
+        onClick={() => setDrawerOpen(true)}
       >
         Submit
       </Button>
@@ -82,8 +82,8 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="middle">
-      <Button onClick={() => setOpen(true)}>Open Style Drawer</Button>
-      <Button type="primary" onClick={() => setFnOpen(true)}>
+      <Button onClick={() => setDrawerOpen(true)}>Open Style Drawer</Button>
+      <Button type="primary" onClick={() => setDrawerFnOpen(true)}>
         Open Function Drawer
       </Button>
       <Drawer
@@ -92,7 +92,7 @@ const App: React.FC = () => {
         title="Custom Style Drawer"
         styles={styles}
         open={drawerOpen}
-        onClose={() => setOpen(false)}
+        onClose={() => setDrawerOpen(false)}
       >
         {sharedContent}
       </Drawer>
@@ -103,7 +103,7 @@ const App: React.FC = () => {
         styles={stylesFn}
         mask={{ enabled: true, blur: true }}
         open={drawerFnOpen}
-        onClose={() => setFnOpen(false)}
+        onClose={() => setDrawerFnOpen(false)}
       >
         {sharedContent}
       </Drawer>

components/dropdown/style/status.ts

@@ -1,7 +1,9 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { DropdownToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genStatusStyle: GenerateStyle<DropdownToken> = (token) => {
+const genStatusStyle: GenerateStyle<DropdownToken, CSSObject> = (token) => {
   const { componentCls, menuCls, colorError, colorTextLightSolid } = token;
 
   const itemCls = `${menuCls}-item`;

components/form/__tests__/index.test.tsx

@@ -829,13 +829,13 @@ describe('Form', () => {
   // https://github.com/ant-design/ant-design/issues/20813
   it('should update help directly when provided', async () => {
     const App: React.FC = () => {
-      const [message, updateMessage] = React.useState('');
+      const [message, setMessage] = React.useState('');
       return (
         <Form>
           <Form.Item label="hello" help={message}>
             <Input />
           </Form.Item>
-          <Button onClick={() => updateMessage('bamboo')} />
+          <Button onClick={() => setMessage('bamboo')} />
         </Form>
       );
     };

components/form/demo/required-mark.tsx

@@ -14,10 +14,10 @@ const customizeRequiredMark = (label: React.ReactNode, { required }: { required:
 
 const App: React.FC = () => {
   const [form] = Form.useForm();
-  const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
+  const [requiredMark, setRequiredMark] = useState<RequiredMark>('optional');
 
   const onRequiredTypeChange: FormProps<any>['onValuesChange'] = ({ requiredMarkValue }) => {
-    setRequiredMarkType(requiredMarkValue);
+    setRequiredMark(requiredMarkValue);
   };
 
   return (

components/form/style/explain.ts

@@ -1,7 +1,9 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { FormToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
+const genFormValidateMotionStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   const { componentCls, motionDurationFast, motionEaseInOut } = token;
 
   const helpCls = `${componentCls}-show-help`;

components/form/style/fallbackCmp.ts

@@ -4,13 +4,15 @@
  */
 
 // Style as inline component
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import { prepareToken } from '.';
 import type { FormToken } from '.';
 import { genSubStyleComponent } from '../../theme/internal';
 import type { GenerateStyle } from '../../theme/internal';
 
 // ============================= Fallback =============================
-const genFallbackStyle: GenerateStyle<FormToken> = (token) => {
+const genFallbackStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   const { formItemCls } = token;
 
   return {

components/form/style/index.ts

@@ -85,7 +85,7 @@ export interface FormToken extends FullToken<'Form'> {
   rootPrefixCls: string;
 }
 
-const resetForm = (token: AliasToken): CSSObject => ({
+const resetForm: GenerateStyle<AliasToken, CSSObject> = (token) => ({
   legend: {
     display: 'block',
     width: '100%',
@@ -156,11 +156,10 @@ const genFormSize = (token: FormToken, height: number): CSSObject => {
   };
 };
 
-const genFormStyle: GenerateStyle<FormToken> = (token) => {
+const genFormStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   const { componentCls } = token;
-
   return {
-    [token.componentCls]: {
+    [componentCls]: {
       ...resetComponent(token),
       ...resetForm(token),
 
@@ -183,7 +182,7 @@ const genFormStyle: GenerateStyle<FormToken> = (token) => {
   };
 };
 
-const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
+const genFormItemStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   const {
     formItemCls,
     iconCls,
@@ -424,7 +423,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
   };
 };
 
-const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({
+const makeVerticalLayoutLabel: GenerateStyle<FormToken, CSSObject> = (token) => ({
   padding: token.verticalLabelPadding,
   margin: token.verticalLabelMargin,
   whiteSpace: 'initial',
@@ -440,7 +439,7 @@ const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({
   },
 });
 
-const genHorizontalStyle = (token: FormToken): CSSObject => {
+const genHorizontalStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   const { antCls, formItemCls } = token;
 
   return {
@@ -471,7 +470,7 @@ const genHorizontalStyle = (token: FormToken): CSSObject => {
   };
 };
 
-const genInlineStyle: GenerateStyle<FormToken> = (token) => {
+const genInlineStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   const { componentCls, formItemCls, inlineItemMarginBottom } = token;
 
   return {
@@ -510,7 +509,7 @@ const genInlineStyle: GenerateStyle<FormToken> = (token) => {
   };
 };
 
-const makeVerticalLayout = (token: FormToken): CSSObject => {
+const makeVerticalLayout: GenerateStyle<FormToken, CSSObject> = (token) => {
   const { componentCls, formItemCls, rootPrefixCls } = token;
 
   return {
@@ -606,10 +605,7 @@ export const prepareComponentToken: GetDefaultToken<'Form'> = (token) => ({
   inlineItemMarginBottom: 0,
 });
 
-export const prepareToken: (
-  token: Parameters<GenStyleFn<'Form'>>[0],
-  rootPrefixCls: string,
-) => FormToken = (token, rootPrefixCls) => {
+export const prepareToken = (token: Parameters<GenStyleFn<'Form'>>[0], rootPrefixCls: string) => {
   const formToken = mergeToken<FormToken>(token, {
     formItemCls: `${token.componentCls}-item`,
     rootPrefixCls,

components/grid/style/index.ts

@@ -21,7 +21,7 @@ interface GridColToken extends FullToken<'Grid'> {
 }
 
 // ============================== Row-Shared ==============================
-const genGridRowStyle: GenerateStyle<GridRowToken> = (token): CSSObject => {
+const genGridRowStyle: GenerateStyle<GridRowToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {
@@ -84,7 +84,7 @@ const genGridRowStyle: GenerateStyle<GridRowToken> = (token): CSSObject => {
 };
 
 // ============================== Col-Shared ==============================
-const genGridColStyle: GenerateStyle<GridColToken> = (token): CSSObject => {
+const genGridColStyle: GenerateStyle<GridColToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

components/image/style/index.ts

@@ -57,7 +57,7 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({
   inset: 0,
 });
 
-export const genImageCoverStyle = (token: ImageToken): CSSObject => {
+export const genImageCoverStyle: GenerateStyle<ImageToken, CSSObject> = (token) => {
   const { componentCls, motionDurationSlow, colorTextLightSolid } = token;
   return {
     [componentCls]: {
@@ -90,7 +90,7 @@ export const genImageCoverStyle = (token: ImageToken): CSSObject => {
   };
 };
 
-export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
+export const genImagePreviewStyle: GenerateStyle<ImageToken, CSSObject> = (token) => {
   const {
     motionEaseOut,
     previewCls,
@@ -255,7 +255,7 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
   };
 };
 
-const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
+const genImageStyle: GenerateStyle<ImageToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     // ============================== image ==============================
@@ -282,7 +282,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
   };
 };
 
-const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
+const genPreviewMotion: GenerateStyle<ImageToken, CSSObject> = (token) => {
   const { previewCls, motionDurationSlow } = token;
 
   return {

components/input-number/style/index.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genBasicInputStyle, genPlaceholderStyle, initInputToken } from '../../input/style';
@@ -324,7 +325,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token) => {
   ];
 };
 
-const genCompatibleStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
+const genCompatibleStyles: GenerateStyle<InputNumberToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
   return {

components/input/style/index.ts

@@ -347,7 +347,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
   };
 };
 
-export const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
+export const genInputStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const { componentCls, controlHeightSM, lineWidth, calc } = token;
 
   const FIXED_CHROME_COLOR_HEIGHT = 16;
@@ -426,7 +426,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
   };
 };
 
-export const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
+export const genAffixStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const {
     componentCls,
     inputAffixPadding,
@@ -539,7 +539,7 @@ export const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
   };
 };
 
-const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
+const genGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const { componentCls, borderRadiusLG, borderRadiusSM } = token;
 
   return {
@@ -630,7 +630,7 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
 };
 
 // ============================== Range ===============================
-const genRangeStyle: GenerateStyle<InputToken> = (token) => {
+const genRangeStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

components/input/style/otp.ts

@@ -1,10 +1,12 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import type { InputToken } from './token';
 import { initComponentToken, initInputToken } from './token';
 
 // =============================== OTP ================================
-const genOTPStyle: GenerateStyle<InputToken> = (token) => {
+const genOTPStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const { componentCls, paddingXS } = token;
 
   return {

components/input/style/search.ts

@@ -1,7 +1,9 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
-const genSearchStyle: GenerateStyle<FullToken<'Input'>> = (token) => {
+const genSearchStyle: GenerateStyle<FullToken<'Input'>, CSSObject> = (token) => {
   const { componentCls } = token;
 
   const btnCls = `${componentCls}-btn`;

components/input/style/variants.ts

@@ -1,15 +1,16 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
+import type { GenerateStyle } from '../../theme/internal';
 import { mergeToken } from '../../theme/internal';
 import type { InputToken } from './token';
 
-export const genHoverStyle = (token: InputToken): CSSObject => ({
+export const genHoverStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
   borderColor: token.hoverBorderColor,
   backgroundColor: token.hoverBg,
 });
 
-export const genDisabledStyle = (token: InputToken): CSSObject => ({
+export const genDisabledStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
   color: token.colorTextDisabled,
   backgroundColor: token.colorBgContainerDisabled,
   borderColor: token.colorBorder,
@@ -133,7 +134,7 @@ const genOutlinedGroupStatusStyle = (
   },
 });
 
-export const genOutlinedGroupStyle = (token: InputToken): CSSObject => ({
+export const genOutlinedGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
   '&-outlined': {
     [`${token.componentCls}-group`]: {
       '&-addon': {
@@ -308,7 +309,7 @@ const genFilledGroupStatusStyle = (
   },
 });
 
-export const genFilledGroupStyle = (token: InputToken): CSSObject => ({
+export const genFilledGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
   '&-filled': {
     [`${token.componentCls}-group-addon`]: {
       background: token.colorFillTertiary,

components/list/style/index.ts

@@ -81,7 +81,7 @@ interface ListToken extends FullToken<'List'> {
   minHeight: number | string;
 }
 
-const genBorderedStyle = (token: ListToken): CSSObject => {
+const genBorderedStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
   const {
     listBorderedCls,
     componentCls,
@@ -128,7 +128,7 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
     },
   };
 };
-const genResponsiveStyle = (token: ListToken): CSSObject => {
+const genResponsiveStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
   const { componentCls, screenSM, screenMD, marginLG, marginSM, margin } = token;
   return {
     [`@media screen and (max-width:${screenMD}px)`]: {
@@ -178,7 +178,7 @@ const genResponsiveStyle = (token: ListToken): CSSObject => {
 };
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<ListToken> = (token) => {
+const genBaseStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
   const {
     componentCls,
     antCls,

components/masonry/style/index.ts

@@ -8,7 +8,7 @@ export interface ComponentToken {}
 
 export interface MasonryToken extends FullToken<'Masonry'> {}
 
-export const genMasonryStyle: GenerateStyle<MasonryToken> = (token: MasonryToken): CSSObject => {
+export const genMasonryStyle: GenerateStyle<MasonryToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   const itemCls = `${componentCls}-item`;

components/menu/style/index.ts

@@ -406,7 +406,7 @@ export interface MenuToken extends FullToken<'Menu'> {
   darkPopupBg: string;
 }
 
-const genMenuItemStyle = (token: MenuToken): CSSObject => {
+const genMenuItemStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   const {
     componentCls,
     motionDurationSlow,
@@ -486,7 +486,7 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
   };
 };
 
-const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
+const genSubMenuArrowStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   const {
     componentCls,
     motionDurationSlow,

components/modal/demo/style-class.tsx

@@ -60,8 +60,8 @@ const stylesFn: ModalProps['styles'] = (info) => {
 };
 
 const App: React.FC = () => {
-  const [modalOpen, setOpen] = useState(false);
-  const [modalFnOpen, setFnOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalFnOpen, setModalFnOpen] = useState(false);
 
   const sharedProps: ModalProps = {
     centered: true,
@@ -71,7 +71,7 @@ const App: React.FC = () => {
   const footer: React.ReactNode = (
     <>
       <Button
-        onClick={() => setFnOpen(false)}
+        onClick={() => setModalFnOpen(false)}
         styles={{ root: { borderColor: '#ccc', color: '#171717', backgroundColor: '#fff' } }}
       >
         Cancel
@@ -79,7 +79,7 @@ const App: React.FC = () => {
       <Button
         type="primary"
         styles={{ root: { backgroundColor: '#171717' } }}
-        onClick={() => setOpen(true)}
+        onClick={() => setModalOpen(true)}
       >
         Submit
       </Button>
@@ -88,8 +88,8 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="middle">
-      <Button onClick={() => setOpen(true)}>Open Style Modal</Button>
-      <Button type="primary" onClick={() => setFnOpen(true)}>
+      <Button onClick={() => setModalOpen(true)}>Open Style Modal</Button>
+      <Button type="primary" onClick={() => setModalFnOpen(true)}>
         Open Function Modal
       </Button>
       <Modal
@@ -98,8 +98,8 @@ const App: React.FC = () => {
         title="Custom Style Modal"
         styles={styles}
         open={modalOpen}
-        onOk={() => setOpen(false)}
-        onCancel={() => setOpen(false)}
+        onOk={() => setModalOpen(false)}
+        onCancel={() => setModalOpen(false)}
       >
         {sharedContent}
       </Modal>
@@ -110,8 +110,8 @@ const App: React.FC = () => {
         styles={stylesFn}
         mask={{ enabled: true, blur: true }}
         open={modalFnOpen}
-        onOk={() => setFnOpen(false)}
-        onCancel={() => setFnOpen(false)}
+        onOk={() => setModalFnOpen(false)}
+        onCancel={() => setModalFnOpen(false)}
       >
         {sharedContent}
       </Modal>

components/modal/style/index.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { getMediaSize } from '../../grid/style';
@@ -396,7 +397,7 @@ const genRTLStyle: GenerateStyle<ModalToken> = (token) => {
   };
 };
 
-const genResponsiveWidthStyle: GenerateStyle<ModalToken> = (token) => {
+const genResponsiveWidthStyle: GenerateStyle<ModalToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   const oriGridMediaSizesMap: Record<string, number> = getMediaSize(token);
@@ -434,7 +435,7 @@ const genResponsiveWidthStyle: GenerateStyle<ModalToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalToken = (token) => {
+export const prepareToken = (token: Parameters<GenStyleFn<'Modal'>>[0]) => {
   const headerPaddingVertical = token.padding;
   const headerFontSize = token.fontSizeHeading5;
   const headerLineHeight = token.lineHeightHeading5;

components/notification/style/index.ts

@@ -109,7 +109,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
   notificationProgressHeight: number;
 }
 
-export const genNoticeStyle = (token: NotificationToken): CSSObject => {
+export const genNoticeStyle: GenerateStyle<NotificationToken, CSSObject> = (token) => {
   const {
     iconCls,
     componentCls, // .ant-notification

components/notification/style/stack.ts

@@ -30,7 +30,7 @@ const genPlacementStackStyle = (
   };
 };
 
-const genStackChildrenStyle = (token: NotificationToken): CSSObject => {
+const genStackChildrenStyle: GenerateStyle<NotificationToken, CSSObject> = (token) => {
   const childrenStyle: CSSObject = {};
   for (let i = 1; i < token.notificationStackLayer; i++) {
     childrenStyle[`&:nth-last-child(${i + 1})`] = {

components/progress/style/index.ts

@@ -302,7 +302,7 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
 // ====================================================================
 // ==                              Step                              ==
 // ====================================================================
-const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSObject => {
+const genStepStyle: GenerateStyle<ProgressToken, CSSObject> = (token) => {
   const { componentCls: progressCls } = token;
 
   return {
@@ -337,7 +337,7 @@ const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
 // ====================================================================
 // ==                           Small Line                           ==
 // ====================================================================
-const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSObject => {
+const genSmallLine: GenerateStyle<ProgressToken, CSSObject> = (token) => {
   const { componentCls: progressCls, iconCls: iconPrefixCls } = token;
 
   return {

components/rate/style/index.ts

@@ -98,13 +98,13 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => {
   };
 };
 
-const genRateRtlStyle = (token: RateToken): CSSObject => ({
+const genRateRtlStyle: GenerateStyle<RateToken, CSSObject> = (token) => ({
   [`&-rtl${token.componentCls}`]: {
     direction: 'rtl',
   },
 });
 
-const genRateStyle: GenerateStyle<RateToken> = (token) => {
+const genRateStyle: GenerateStyle<RateToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

components/result/style/index.ts

@@ -38,7 +38,7 @@ interface ResultToken extends FullToken<'Result'> {
 }
 
 // ============================== Styles ==============================
-const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
+const genBaseStyle: GenerateStyle<ResultToken, CSSObject> = (token) => {
   const {
     componentCls,
     lineHeightHeading3,

components/segmented/style/index.ts

@@ -63,12 +63,12 @@ function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {
   };
 }
 
-function getItemSelectedStyle(token: SegmentedToken): CSSObject {
+const getItemSelectedStyle: GenerateStyle<SegmentedToken, CSSObject> = (token) => {
   return {
     background: token.itemSelectedBg,
     boxShadow: token.boxShadowTertiary,
   };
-}
+};
 
 const segmentedTextEllipsisCss: CSSObject = {
   overflow: 'hidden',
@@ -77,7 +77,7 @@ const segmentedTextEllipsisCss: CSSObject = {
 };
 
 // ============================== Styles ==============================
-const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken) => {
+const genSegmentedStyle: GenerateStyle<SegmentedToken, CSSObject> = (token) => {
   const { componentCls, motionDurationSlow, motionEaseInOut, motionDurationMid } = token;
 
   const labelHeight = token

components/select/demo/placement-debug.tsx

@@ -15,12 +15,12 @@ const randomOptions = (count?: number) => {
 };
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
+  const [placement, setPlacement] = useState<SelectCommonPlacement>('topLeft');
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState(() => randomOptions(3));
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (

components/select/demo/placement.tsx

@@ -5,10 +5,10 @@ import { Radio, Select } from 'antd';
 type SelectCommonPlacement = SelectProps['placement'];
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
+  const [placement, setPlacement] = useState<SelectCommonPlacement>('topLeft');
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (

components/select/style/index.ts

@@ -12,7 +12,7 @@ import { prepareComponentToken } from './token';
 export type { ComponentToken };
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
+const genBaseStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
   const { antCls, componentCls, motionDurationMid, inputPaddingHorizontalBase } = token;
 
   const hoverShowClearStyle: CSSObject = {

components/select/style/select-input-customize.ts

@@ -1,7 +1,9 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/interface';
 import type { SelectToken } from './token';
 
-const genSelectInputCustomizeStyle: GenerateStyle<SelectToken> = (token) => {
+const genSelectInputCustomizeStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

components/select/style/select-input.ts

@@ -89,7 +89,7 @@ const genSelectInputVariantStyle = (
   };
 };
 
-const genSelectInputStyle: GenerateStyle<SelectToken> = (token) => {
+const genSelectInputStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
   const { componentCls, fontHeight, controlHeight, iconCls, antCls, calc } = token;
   const [varName, varRef] = genCssVar(antCls, 'select');
   return {

components/skeleton/style/index.ts

@@ -74,7 +74,7 @@ const genSkeletonElementSize = (size: number | string): CSSObject => ({
   ...genSkeletonElementCommonSize(size),
 });
 
-const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
+const genSkeletonColor: GenerateStyle<SkeletonToken, CSSObject> = (token) => ({
   background: token.skeletonLoadingBackground,
   backgroundSize: '400% 100%',
   animationName: skeletonClsLoading,
@@ -82,13 +82,14 @@ const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
   animationTimingFunction: 'ease',
   animationIterationCount: 'infinite',
 });
+
 const genSkeletonElementInputSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
   width: calc(size).mul(5).equal(),
   minWidth: calc(size).mul(5).equal(),
   ...genSkeletonElementCommonSize(size),
 });
 
-const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
+const genSkeletonElementAvatar: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
   const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
     token;
   return {
@@ -110,7 +111,7 @@ const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
   };
 };
 
-const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
+const genSkeletonElementInput: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
   const {
     controlHeight,
     borderRadiusSM,
@@ -139,7 +140,7 @@ const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
   };
 };
 
-const genSkeletonElementShape = (token: SkeletonToken): CSSObject => {
+const genSkeletonElementShape: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
   const { gradientFromColor, borderRadiusSM, imageSizeBase, calc } = token;
   return {
     display: 'inline-flex',
@@ -152,7 +153,7 @@ const genSkeletonElementShape = (token: SkeletonToken): CSSObject => {
   };
 };
 
-const genSkeletonElementNode = (token: SkeletonToken): CSSObject => {
+const genSkeletonElementNode: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
   return {
     [token.skeletonNodeCls]: {
       ...genSkeletonElementShape(token),
@@ -160,7 +161,7 @@ const genSkeletonElementNode = (token: SkeletonToken): CSSObject => {
   };
 };
 
-const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
+const genSkeletonElementImage: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
   const { skeletonImageCls, imageSizeBase, calc } = token;
 
   return {
@@ -209,7 +210,7 @@ const genSkeletonElementButtonSize = (size: number, calc: CSSUtil['calc']): CSSO
   ...genSkeletonElementCommonSize(size),
 });
 
-const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
+const genSkeletonElementButton: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
   const {
     borderRadiusSM,
     skeletonButtonCls,
@@ -244,7 +245,7 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
 };
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
+const genBaseStyle: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
   const {
     componentCls,
     skeletonAvatarCls,

components/splitter/style/index.ts

@@ -41,7 +41,7 @@ const centerStyle: CSSObject = {
   transform: 'translate(-50%, -50%)',
 };
 
-const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): CSSObject => {
+const genSplitterStyle: GenerateStyle<SplitterToken, CSSObject> = (token) => {
   const {
     componentCls,
     colorFill,

components/statistic/style/index.ts

@@ -19,7 +19,7 @@ export interface ComponentToken {
 
 interface StatisticToken extends FullToken<'Statistic'> {}
 
-const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken): CSSObject => {
+const genStatisticStyle: GenerateStyle<StatisticToken, CSSObject> = (token) => {
   const {
     componentCls,
     marginXXS,

components/steps/demo/progress-debug.tsx

@@ -3,7 +3,7 @@ import type { StepsProps } from 'antd';
 import { Button, Space, Steps } from 'antd';
 
 const App: React.FC = () => {
-  const [percent, setPercentage] = useState<number | undefined>(0);
+  const [percent, setPercent] = useState<number | undefined>(0);
   const [current, setCurrent] = useState(1);
   const [status, setStatus] = useState<StepsProps['status']>('process');
   const content = 'This is a content.';
@@ -25,10 +25,10 @@ const App: React.FC = () => {
   return (
     <>
       <Space.Compact block>
-        <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
+        <Button onClick={() => setPercent(undefined)}>Percentage to undefined</Button>
         <Button
           onClick={() =>
-            setPercentage((prev) => {
+            setPercent((prev) => {
               const next = (prev ?? 0) + 10;
               return next > 100 ? 0 : next;
             })

components/style/index.tsx

@@ -1,7 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import type { AliasToken } from '../theme/internal';
+import type { AliasToken, GenerateStyle } from '../theme/internal';
 
 export const textEllipsis: CSSObject = {
   overflow: 'hidden',
@@ -60,7 +60,7 @@ export const clearFix = (): CSSObject => ({
   },
 });
 
-export const genLinkStyle = (token: AliasToken): CSSObject => ({
+export const genLinkStyle: GenerateStyle<AliasToken, CSSObject> = (token) => ({
   a: {
     color: token.colorLink,
     textDecoration: token.linkDecoration,
@@ -151,7 +151,7 @@ export const genIconStyle = (iconPrefixCls: string): CSSObject => ({
   },
 });
 
-export const operationUnit = (token: AliasToken): CSSObject => ({
+export const operationUnit: GenerateStyle<AliasToken, CSSObject> = (token) => ({
   // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
   // And Typography use this to generate link style which should not do this.
   color: token.colorLink,

components/style/motion/collapse.ts

@@ -1,6 +1,8 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { AliasToken, GenerateStyle, TokenWithCommonCls } from '../../theme/internal';
 
-const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = (token) => {
+const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>, CSSObject> = (token) => {
   const { componentCls, antCls, motionDurationMid, motionEaseInOut } = token;
   return {
     [componentCls]: {

components/style/motion/index.ts

@@ -22,6 +22,7 @@ import {
   slideUpIn,
   slideUpOut,
 } from './slide';
+import { genNoMotionStyle } from './util';
 import {
   initZoomMotion,
   zoomBigIn,
@@ -42,6 +43,7 @@ export {
   fadeIn,
   fadeOut,
   genCollapseMotion,
+  genNoMotionStyle,
   initFadeMotion,
   initMoveMotion,
   initSlideMotion,

components/style/motion/util.ts

@@ -0,0 +1,10 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
+export const genNoMotionStyle = (): CSSObject => {
+  return {
+    '@media (prefers-reduced-motion: reduce)': {
+      transition: 'none',
+      animation: 'none',
+    },
+  };
+};

components/style/motion/zoom.ts

@@ -162,6 +162,7 @@ type ZoomMotionTypes =
   | 'zoom-right'
   | 'zoom-up'
   | 'zoom-down';
+
 const zoomMotion: Record<ZoomMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
   zoom: {
     inKeyframes: zoomIn,

components/switch/style/index.ts

@@ -3,6 +3,7 @@ import { unit } from '@ant-design/cssinjs';
 import { FastColor } from '@ant-design/fast-color';
 
 import { genFocusStyle, resetComponent } from '../../style';
+import { genNoMotionStyle } from '../../style/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
@@ -208,6 +209,7 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
         width: handleSize,
         height: handleSize,
         transition: `all ${token.switchDuration} ease-in-out`,
+        ...genNoMotionStyle(),
 
         '&::before': {
           position: 'absolute',
@@ -220,6 +222,7 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
           boxShadow: handleShadow,
           transition: `all ${token.switchDuration} ease-in-out`,
           content: '""',
+          ...genNoMotionStyle(),
         },
       },
 
@@ -270,7 +273,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
         transition: [`padding-inline-start`, `padding-inline-end`]
           .map((prop) => `${prop} ${switchDuration} ease-in-out`)
           .join(', '),
-
+        ...genNoMotionStyle(),
         [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
           display: 'block',
           color: token.colorTextLightSolid,
@@ -280,6 +283,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
           transition: [`margin-inline-start`, `margin-inline-end`]
             .map((prop) => `${prop} ${switchDuration} ease-in-out`)
             .join(', '),
+          ...genNoMotionStyle(),
         },
 
         [`${switchInnerCls}-checked`]: {
@@ -327,7 +331,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
   };
 };
 
-const genSwitchStyle = (token: SwitchToken): CSSObject => {
+const genSwitchStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
   const { componentCls, trackHeight, trackMinWidth } = token;
 
   return {
@@ -347,7 +351,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
       cursor: 'pointer',
       transition: `all ${token.motionDurationMid}`,
       userSelect: 'none',
-
+      ...genNoMotionStyle(),
       [`&:hover:not(${componentCls}-disabled)`]: {
         background: token.colorTextTertiary,
       },

components/table/__tests__/Table.filter.test.tsx

@@ -2010,7 +2010,7 @@ describe('Table.filter', () => {
     ];
 
     const App: React.FC = () => {
-      const [ddd, setData] = React.useState<Array<DataType>>([
+      const [data, setData] = React.useState<Array<DataType>>([
         {
           key: '1',
           name: 'John Brown',
@@ -2089,7 +2089,7 @@ describe('Table.filter', () => {
           <span className="rest-btn" onClick={handleClick}>
             refresh
           </span>
-          <Table columns={cs} dataSource={ddd} />
+          <Table columns={cs} dataSource={data} />
         </div>
       );
     };

components/tabs/style/index.ts

@@ -149,7 +149,7 @@ export interface TabsToken extends FullToken<'Tabs'> {
   tabsHorizontalItemMarginRTL: string;
 }
 
-const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
+const genCardStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   const {
     componentCls,
     tabsCardPadding,
@@ -272,7 +272,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
   };
 };
 
-const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
+const genDropdownStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   const { componentCls, itemHoverColor, dropdownEdgeChildVerticalPadding } = token;
   return {
     [`${componentCls}-dropdown`]: {
@@ -361,7 +361,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
   };
 };
 
-const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
+const genPositionStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   const {
     componentCls,
     margin,
@@ -600,7 +600,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
   };
 };
 
-const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
+const genSizeStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   const {
     componentCls,
     cardPaddingSM,
@@ -690,7 +690,7 @@ const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
   };
 };
 
-const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
+const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   const {
     componentCls,
     itemActiveColor,
@@ -800,7 +800,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
   };
 };
 
-const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
+const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   const { componentCls, tabsHorizontalItemMarginRTL, iconCls, cardGutter, calc } = token;
   const rtlCls = `${componentCls}-rtl`;
   return {
@@ -898,7 +898,7 @@ const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
   };
 };
 
-const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
+const genTabsStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   const {
     componentCls,
     tabsCardPadding,

components/tag/style/index.ts

@@ -6,7 +6,7 @@ import { FastColor } from '@ant-design/fast-color';
 import { AggregationColor } from '../../color-picker/color';
 import { isBright } from '../../color-picker/components/ColorPresets';
 import { resetComponent } from '../../style';
-import type { FullToken, GenStyleFn, GetDefaultToken } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GenStyleFn, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -38,7 +38,7 @@ export interface TagToken extends FullToken<'Tag'> {
 
 // ============================== Styles ==============================
 
-const genBaseStyle = (token: TagToken): CSSInterpolation => {
+const genBaseStyle: GenerateStyle<TagToken, CSSInterpolation> = (token) => {
   const { paddingXXS, lineWidth, tagPaddingHorizontal, componentCls, calc } = token;
   const paddingInline = calc(tagPaddingHorizontal).sub(lineWidth).equal();
   const iconMarginInline = calc(paddingXXS).sub(lineWidth).equal();
@@ -206,7 +206,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
 };
 
 // ============================== Export ==============================
-export const prepareToken: (token: Parameters<GenStyleFn<'Tag'>>[0]) => TagToken = (token) => {
+export const prepareToken = (token: Parameters<GenStyleFn<'Tag'>>[0]) => {
   const { lineWidth, fontSizeIcon, calc } = token;
   const tagFontSize = token.fontSizeSM;
   const tagToken = mergeToken<TagToken>(token, {

components/tour/__tests__/index.test.tsx

@@ -128,7 +128,7 @@ describe('Tour', () => {
   it('button props onClick', () => {
     const App: React.FC = () => {
       const coverBtnRef = useRef<HTMLButtonElement>(null);
-      const [btnName, steBtnName] = React.useState<string>('defaultBtn');
+      const [btnName, setBtnName] = React.useState<string>('defaultBtn');
       return (
         <>
           <span id="btnName">{btnName}</span>
@@ -143,17 +143,17 @@ describe('Tour', () => {
                 description: '',
                 target: () => coverBtnRef.current!,
                 nextButtonProps: {
-                  onClick: () => steBtnName('nextButton'),
+                  onClick: () => setBtnName('nextButton'),
                 },
               },
               {
                 title: '',
                 target: () => coverBtnRef.current!,
                 prevButtonProps: {
-                  onClick: () => steBtnName('prevButton'),
+                  onClick: () => setBtnName('prevButton'),
                 },
                 nextButtonProps: {
-                  onClick: () => steBtnName('finishButton'),
+                  onClick: () => setBtnName('finishButton'),
                 },
               },
             ]}

components/transfer/style/index.ts

@@ -42,9 +42,7 @@ interface TransferToken extends FullToken<'Transfer'> {
   transferHeaderVerticalPadding: number;
 }
 
-const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
-  token: TransferToken,
-): CSSObject => {
+const genTransferCustomizeStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
   const { antCls, componentCls, listHeight, controlHeightLG } = token;
 
   const tableCls = `${antCls}-table`;
@@ -98,7 +96,7 @@ const genTransferStatusColor = (token: TransferToken, color: string): CSSObject
   };
 };
 
-const genTransferStatusStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+const genTransferStatusStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     [`${componentCls}-status-error`]: {
@@ -110,7 +108,7 @@ const genTransferStatusStyle: GenerateStyle<TransferToken> = (token: TransferTok
   };
 };
 
-const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+const genTransferListStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
   const {
     componentCls,
     colorBorder,
@@ -314,7 +312,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
   };
 };
 
-const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+const genTransferStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
   const {
     antCls,
     iconCls,
@@ -358,7 +356,7 @@ const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): C
   };
 };
 
-const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+const genTransferRTLStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     [`${componentCls}-rtl`]: {

components/tree-select/demo/placement.tsx

@@ -37,10 +37,10 @@ const treeData = [
   },
 ];
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
+  const [placement, setPlacement] = useState<SelectCommonPlacement>('topLeft');
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (

components/typography/Base/util.ts

@@ -21,12 +21,6 @@ export function getNode(dom: React.ReactNode, defaultNode: React.ReactNode, need
 export function isEleEllipsis(ele: HTMLElement): boolean {
   // Create a new div to get the size
   const childDiv = document.createElement('em');
-  
-  // Set styles to prevent the child element from affecting layout measurements
-  // line-height: 0 prevents font metrics from causing false positives
-  childDiv.style.lineHeight = '0';
-  childDiv.style.verticalAlign = 'top';
-  
   ele.appendChild(childDiv);
 
   // For test case

components/typography/__tests__/ellipsis.test.tsx

@@ -387,16 +387,10 @@ describe('Typography.Ellipsis', () => {
               'ant-typography-css-ellipsis-content-measure',
             )
           ) {
-            // Check if line-height is set to 0 (from the fix)
-            const element = this as unknown as HTMLElement;
-            const lineHeight = element.style.lineHeight;
-            // 22 is the default LINE_HEIGHT used in the test setup
-            const height = lineHeight === '0' ? 0 : 22;
-            
             return {
               ...measureRect,
               right: measureRect.left,
-              bottom: measureRect.top + height,
+              bottom: measureRect.top + 22,
             };
           }
 
@@ -508,29 +502,6 @@ describe('Typography.Ellipsis', () => {
 
         expect(baseElement.querySelector('.ant-tooltip-open')).toBeFalsy();
       });
-
-      // Fix for font metric issue where em element height differs from container
-      it('should not show tooltip when em height differs due to font metrics', async () => {
-        // Simulate scenario where:
-        // - Container and measure have same horizontal bounds (no horizontal overflow)
-        // - Without fix: em element height would be 20px, container is 18px
-        // - With fix: em element height is 0px (line-height: 0)
-        containerRect.right = 100;
-        containerRect.bottom = 18;
-        measureRect.left = 0;
-        measureRect.top = 0;
-
-        const { container, baseElement } = await getWrapper({
-          title: true,
-        });
-        fireEvent.mouseEnter(container.firstChild!);
-
-        await waitFakeTimer();
-
-        // With the fix, tooltip should not show because text is not actually ellipsed
-        // The em element now has line-height: 0, so its height won't exceed container height
-        expect(baseElement.querySelector('.ant-tooltip-open')).toBeFalsy();
-      });
     });
   });
 
@@ -673,12 +644,12 @@ describe('Typography.Ellipsis', () => {
   it('Switch locale', async () => {
     const ref = React.createRef<HTMLElement>();
     const App = () => {
-      const [locale, setLocal] = React.useState<Locale>();
+      const [locale, setLocale] = React.useState<Locale>();
 
       return (
         <ConfigProvider locale={locale}>
           <div>
-            <button type="button" onClick={() => setLocal(zhCN)}>
+            <button type="button" onClick={() => setLocale(zhCN)}>
               zhcn
             </button>
             <Base

components/typography/style/mixins.ts

@@ -34,7 +34,7 @@ const getTitleStyle = (
 export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => {
   const headings = [1, 2, 3, 4, 5] as const;
 
-  const styles = {} as CSSObject;
+  const styles: CSSObject = {};
   headings.forEach((headingLevel) => {
     styles[
       `
@@ -78,7 +78,7 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
   };
 };
 
-export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token): CSSObject => ({
+export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => ({
   code: {
     margin: '0 0.2em',
     paddingInline: '0.4em',

components/upload/style/dragger.ts

@@ -1,9 +1,10 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
+const genDraggerStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
   const { componentCls, iconCls } = token;
 
   return {

components/upload/style/index.ts

@@ -1,3 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -27,7 +29,7 @@ export interface UploadToken extends FullToken<'Upload'> {
   uploadPicCardSize: number | string;
 }
 
-const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
+const genBaseStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
   const { componentCls, colorTextDisabled } = token;
 
   return {

components/upload/style/picture.ts

@@ -1,11 +1,12 @@
 import { blue } from '@ant-design/colors';
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import type { UploadToken } from '.';
 import { clearFix, textEllipsis } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
+const genPictureStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
   const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset, calc } = token;
   const listCls = `${componentCls}-list`;
   const itemCls = `${listCls}-item`;
@@ -97,7 +98,7 @@ const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
   };
 };
 
-const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
+const genPictureCardStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
   const { componentCls, iconCls, fontSizeLG, colorTextLightSolid, calc } = token;
 
   const listCls = `${componentCls}-list`;

components/upload/style/rtl.ts

@@ -1,10 +1,11 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 // =========================== Motion ===========================
-const genRtlStyle: GenerateStyle<UploadToken> = (token) => {
+const genRtlStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
   const { componentCls } = token;
-
   return {
     [`${componentCls}-rtl`]: {
       direction: 'rtl',

eslint.config.mjs

@@ -65,7 +65,6 @@ export default antfu(
       'react-hooks/refs': 'off',
       'react/no-implicit-key': 'off',
       'react-naming-convention/ref-name': 'off',
-      'react-naming-convention/use-state': 'off',
     },
   },
   {

package.json

@@ -136,7 +136,7 @@
     "@rc-component/rate": "~1.0.1",
     "@rc-component/resize-observer": "^1.1.1",
     "@rc-component/segmented": "~1.3.0",
-    "@rc-component/select": "~1.6.9",
+    "@rc-component/select": "~1.6.10",
     "@rc-component/slider": "~1.0.1",
     "@rc-component/steps": "~1.2.2",
     "@rc-component/switch": "~1.0.3",
@@ -173,7 +173,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
-    "@eslint-react/eslint-plugin": "2.12.4",
+    "@eslint-react/eslint-plugin": "2.13.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@inquirer/prompts": "^8.0.2",
     "@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",