feat: added Stat component and styles

.changeset/purple-tomatoes-drop.md

@@ -0,0 +1,6 @@
+---
+"@yamada-ui/react": minor
+"@yamada-ui/theme": minor
+---
+
+Added `Stat` component.

packages/react/package.json

@@ -91,6 +91,7 @@
     "@yamada-ui/select": "workspace:*",
     "@yamada-ui/skeleton": "workspace:*",
     "@yamada-ui/slider": "workspace:*",
+    "@yamada-ui/stat": "workspace:*",
     "@yamada-ui/stepper": "workspace:*",
     "@yamada-ui/switch": "workspace:*",
     "@yamada-ui/tabs": "workspace:*",

packages/react/src/index.ts

@@ -86,3 +86,4 @@ export * from "@yamada-ui/use-window-event"
 export * from "@yamada-ui/use-media-query"
 export * from "@yamada-ui/use-clipboard"
 export * from "@yamada-ui/ripple"
+export * from "@yamada-ui/stat"

packages/theme/src/components/index.ts

@@ -48,6 +48,7 @@ import { SegmentedControl } from "./segmented-control"
 import { Select } from "./select"
 import { Skeleton } from "./skeleton"
 import { Slider } from "./slider"
+import { Stat } from "./stat"
 import { Stepper } from "./stepper"
 import { Switch } from "./switch"
 import { Table } from "./table"
@@ -107,6 +108,7 @@ export default {
   NativeTable,
   Skeleton,
   Slider,
+  Stat,
   Stepper,
   Switch,
   Table,

packages/theme/src/components/stat.ts

@@ -0,0 +1,37 @@
+import type { ComponentMultiStyle } from "@yamada-ui/core"
+
+export const Stat: ComponentMultiStyle = {
+  baseStyle: {
+    container: {},
+    label: {
+      color: ["blackAlpha.700", "whiteAlpha.600"],
+      fontWeight: "medium",
+    },
+    number: ({ colorScheme: c }) => ({
+      fontFeatureSettings: '"pnum"',
+      fontVariantNumeric: "proportional-nums",
+      verticalAlign: "baseline",
+      fontSize: "5xl",
+      color: c
+        ? [`${c}.500`, `${c}.600`]
+        : ["blackAlpha.800", "whiteAlpha.700"],
+      fontWeight: "extrabold",
+    }),
+    helperMessage: {
+      fontSize: "sm",
+      color: ["blackAlpha.700", "whiteAlpha.600"],
+    },
+    icon: {
+      marginEnd: "1",
+      w: "3.5",
+      h: "3.5",
+      verticalAlign: "middle",
+      var: [
+        { name: "increase", token: "colors", value: "success.400" },
+        { name: "decrease", token: "colors", value: "danger.400" },
+      ],
+    },
+  },
+
+  defaultProps: {},
+}