From e7d8cee41f6c9b47f577e35494df09e1a2304c3f Mon Sep 17 00:00:00 2001
From: hirotomoyamada <hirotomo.yamada@avap.co.jp>
Date: Sun, 24 Dec 2023 09:12:54 +0900
Subject: [PATCH] feat: added `Stat` component and styles

---
 .changeset/purple-tomatoes-drop.md     |  6 +++++
 packages/react/package.json            |  1 +
 packages/react/src/index.ts            |  1 +
 packages/theme/src/components/index.ts |  2 ++
 packages/theme/src/components/stat.ts  | 37 ++++++++++++++++++++++++++
 5 files changed, 47 insertions(+)
 create mode 100644 .changeset/purple-tomatoes-drop.md
 create mode 100644 packages/theme/src/components/stat.ts

diff --git a/.changeset/purple-tomatoes-drop.md b/.changeset/purple-tomatoes-drop.md
new file mode 100644
index 0000000000..3215cebd98
--- /dev/null
+++ b/.changeset/purple-tomatoes-drop.md
@@ -0,0 +1,6 @@
+---
+"@yamada-ui/react": minor
+"@yamada-ui/theme": minor
+---
+
+Added `Stat` component.
diff --git a/packages/react/package.json b/packages/react/package.json
index b797dc2b4f..fa00732cd0 100644
--- a/packages/react/package.json
+++ b/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:*",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 095a3a1473..56cdc1e2d7 100644
--- a/packages/react/src/index.ts
+++ b/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"
diff --git a/packages/theme/src/components/index.ts b/packages/theme/src/components/index.ts
index bd47252462..6bb485313e 100644
--- a/packages/theme/src/components/index.ts
+++ b/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,
diff --git a/packages/theme/src/components/stat.ts b/packages/theme/src/components/stat.ts
new file mode 100644
index 0000000000..d62e29144c
--- /dev/null
+++ b/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: {},
+}