@tidbcloud/uikit 2.0.11 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.1.1
+
+### Patch Changes
+
+- fix(ProTable): enable highlightOnHover ([#468](https://github.com/tidbcloud/tidbcloud-uikit/pull/468))
+
+## 2.1.0
+
+### Minor Changes
+
+- feat: add AnimatedNumber component ([#465](https://github.com/tidbcloud/tidbcloud-uikit/pull/465))
+
 ## 2.0.11
 
 ### Patch Changes

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

@@ -74,7 +74,9 @@ function mergeProTableProps(props) {
         borderRadius: withBorder ? theme2.defaultRadius : 0,
         borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
         overflow: "hidden",
-        transition: "none"
+        transition: "none",
+        // see https://v2.mantine-react-table.com/docs/guides/customize-component-styles#how-to-set-mrt-css-variables
+        "--mrt-row-hover-background-color": theme2.colors.carbon[3]
       })
     },
     mantinePaperProps
@@ -105,9 +107,6 @@ function mergeProTableProps(props) {
             transition: "none",
             backgroundColor: theme.colors.carbon[0],
             color: theme.colors.carbon[8],
-            "&:hover": {
-              backgroundColor: `${theme.colors.carbon[3]} !important`
-            },
             td: {
               borderColor: theme.colors.carbon[3]
             },
@@ -173,11 +172,6 @@ function mergeProTableProps(props) {
             borderBottom: enableRowVirtualization || layoutMode && layoutMode !== "semantic" ? "none !important" : void 0
           }
         },
-        "&[data-hover]": {
-          "&:hover": {
-            "--mrt-row-hover-background-color": theme.colors.carbon[3]
-          }
-        },
         "&:not([data-striped], [data-striped='false'])": {
           backgroundColor: theme.colors.carbon[0]
         },

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

@@ -72,7 +72,9 @@ function mergeProTableProps(props) {
         borderRadius: withBorder ? theme2.defaultRadius : 0,
         borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
         overflow: "hidden",
-        transition: "none"
+        transition: "none",
+        // see https://v2.mantine-react-table.com/docs/guides/customize-component-styles#how-to-set-mrt-css-variables
+        "--mrt-row-hover-background-color": theme2.colors.carbon[3]
       })
     },
     mantinePaperProps
@@ -103,9 +105,6 @@ function mergeProTableProps(props) {
             transition: "none",
             backgroundColor: theme.colors.carbon[0],
             color: theme.colors.carbon[8],
-            "&:hover": {
-              backgroundColor: `${theme.colors.carbon[3]} !important`
-            },
             td: {
               borderColor: theme.colors.carbon[3]
             },
@@ -171,11 +170,6 @@ function mergeProTableProps(props) {
             borderBottom: enableRowVirtualization || layoutMode && layoutMode !== "semantic" ? "none !important" : void 0
           }
         },
-        "&[data-hover]": {
-          "&:hover": {
-            "--mrt-row-hover-background-color": theme.colors.carbon[3]
-          }
-        },
         "&:not([data-striped], [data-striped='false'])": {
           backgroundColor: theme.colors.carbon[0]
         },

package/dist/primitive/AnimatedNumber/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const NumberFlow = require("@number-flow/react");
+const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
+function AnimatedNumber({ value, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: NumberFlow, value, ...props });
+}
+function AnimatedNumberGroup({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: NumberFlow.NumberFlowGroup, ...props, children });
+}
+AnimatedNumber.Group = AnimatedNumberGroup;
+exports.AnimatedNumber = AnimatedNumber;

package/dist/primitive/AnimatedNumber/index.d.cts

@@ -0,0 +1,14 @@
+import { BoxProps } from '../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_sx7emryda53tomnuogmu74guza/node_modules/@mantine/core/lib';
+import { NumberFlowProps } from '@number-flow/react';
+export type AnimatedNumberProps = BoxProps & NumberFlowProps;
+/**
+ * Animated number component, see https://number-flow.barvian.me/ for more examples.
+ */
+export declare function AnimatedNumber({ value, ...props }: AnimatedNumberProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AnimatedNumber {
+    var Group: typeof AnimatedNumberGroup;
+}
+declare function AnimatedNumberGroup({ children, ...props }: BoxProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/primitive/AnimatedNumber/index.d.mts

@@ -0,0 +1,14 @@
+import { BoxProps } from '../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_sx7emryda53tomnuogmu74guza/node_modules/@mantine/core/lib';
+import { NumberFlowProps } from '@number-flow/react';
+export type AnimatedNumberProps = BoxProps & NumberFlowProps;
+/**
+ * Animated number component, see https://number-flow.barvian.me/ for more examples.
+ */
+export declare function AnimatedNumber({ value, ...props }: AnimatedNumberProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AnimatedNumber {
+    var Group: typeof AnimatedNumberGroup;
+}
+declare function AnimatedNumberGroup({ children, ...props }: BoxProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/primitive/AnimatedNumber/index.mjs

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import NumberFlow, { NumberFlowGroup } from "@number-flow/react";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
+function AnimatedNumber({ value, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { component: NumberFlow, value, ...props });
+}
+function AnimatedNumberGroup({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { component: NumberFlowGroup, ...props, children });
+}
+AnimatedNumber.Group = AnimatedNumberGroup;
+export {
+  AnimatedNumber
+};

package/dist/primitive/index.cjs

@@ -11,7 +11,8 @@ const index$1 = require("./Typography/index.cjs");
 const index$2 = require("./MediaQuery/index.cjs");
 const index$3 = require("./Select/index.cjs");
 const index$4 = require("./Button/index.cjs");
-const index$5 = require("../node_modules/.pnpm/@mantine_dropzone@7.15.2_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine__hww35qmvzgxt6vzp3w3turt5w4/node_modules/@mantine/dropzone/esm/index.cjs");
+const index$5 = require("./AnimatedNumber/index.cjs");
+const index$6 = require("../node_modules/.pnpm/@mantine_dropzone@7.15.2_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine__hww35qmvzgxt6vzp3w3turt5w4/node_modules/@mantine/dropzone/esm/index.cjs");
 const AppShell = require("../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/AppShell/AppShell.cjs");
 const AspectRatio = require("../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.cjs");
 const Center = require("../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Center/Center.cjs");
@@ -139,7 +140,8 @@ exports.MediaQuery = index$2.MediaQuery;
 exports.MultiSelect = index$3.MultiSelect;
 exports.Select = index$3.Select;
 exports.Button = index$4.Button;
-exports.Dropzone = index$5.Dropzone;
+exports.AnimatedNumber = index$5.AnimatedNumber;
+exports.Dropzone = index$6.Dropzone;
 exports.AppShell = AppShell.AppShell;
 exports.AspectRatio = AspectRatio.AspectRatio;
 exports.Center = Center.Center;

package/dist/primitive/index.d.cts

@@ -39,6 +39,7 @@ export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.cjs';
 export { Select, type SelectProps, MultiSelect, type MultiSelectProps } from './Select/index.cjs';
 export { Button } from './Button/index.cjs';
 export * from './Prism/index.cjs';
+export { AnimatedNumber, type AnimatedNumberProps } from './AnimatedNumber/index.cjs';
 export { Dropzone, MIME_TYPES, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, MS_WORD_MIME_TYPE, EXE_MIME_TYPE, PDF_MIME_TYPE, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 export type { DropzoneAcceptProps, DropzoneFullScreenProps, DropzoneFullScreenStylesNames, DropzoneIdleProps, DropzoneProps, DropzoneRejectProps, DropzoneStylesNames } from '@mantine/dropzone';
 export { Carousel, useAnimationOffsetEffect } from '@mantine/carousel';

package/dist/primitive/index.d.mts

@@ -39,6 +39,7 @@ export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.mjs';
 export { Select, type SelectProps, MultiSelect, type MultiSelectProps } from './Select/index.mjs';
 export { Button } from './Button/index.mjs';
 export * from './Prism/index.mjs';
+export { AnimatedNumber, type AnimatedNumberProps } from './AnimatedNumber/index.mjs';
 export { Dropzone, MIME_TYPES, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, MS_WORD_MIME_TYPE, EXE_MIME_TYPE, PDF_MIME_TYPE, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 export type { DropzoneAcceptProps, DropzoneFullScreenProps, DropzoneFullScreenStylesNames, DropzoneIdleProps, DropzoneProps, DropzoneRejectProps, DropzoneStylesNames } from '@mantine/dropzone';
 export { Carousel, useAnimationOffsetEffect } from '@mantine/carousel';

package/dist/primitive/index.mjs

@@ -9,6 +9,7 @@ import { TYPOGRAPHY_STYLES_MAP, Typography } from "./Typography/index.mjs";
 import { MediaQuery } from "./MediaQuery/index.mjs";
 import { MultiSelect, Select } from "./Select/index.mjs";
 import { Button } from "./Button/index.mjs";
+import { AnimatedNumber } from "./AnimatedNumber/index.mjs";
 import { Dropzone } from "../node_modules/.pnpm/@mantine_dropzone@7.15.2_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine__hww35qmvzgxt6vzp3w3turt5w4/node_modules/@mantine/dropzone/esm/index.mjs";
 import { AppShell } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/AppShell/AppShell.mjs";
 import { AspectRatio } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.mjs";
@@ -136,6 +137,7 @@ export {
   Alert,
   AlphaSlider,
   Anchor,
+  AnimatedNumber,
   AppShell,
   AspectRatio,
   Autocomplete,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.11",
+  "version": "2.1.1",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",
@@ -65,6 +65,7 @@
     "@mantine/hooks": "7.15.2",
     "@mantine/modals": "7.15.2",
     "@mantine/notifications": "7.15.2",
+    "@number-flow/react": "0.5.5",
     "@tabler/icons-react": "^3.26.0",
     "ahooks": "^3.7.8",
     "clsx": "^2.1.1",