docs(statistic): add formatter and value style demos

Author: wangdicoder

components/statistic/demo/formatter.md

@@ -0,0 +1,29 @@
+<demo>
+
+### Custom Formatter
+
+Use `formatter` to fully customize the value display.
+
+```jsx live
+() => {
+  return (
+    <div style={{ display: 'flex', gap: '48px' }}>
+      <Statistic
+        title="Countdown"
+        value={Date.now() + 86400000}
+        formatter={(val) => {
+          const diff = Math.max(0, Math.floor((Number(val) - Date.now()) / 3600000));
+          return `${diff}h remaining`;
+        }}
+      />
+      <Statistic
+        title="Score"
+        value={9.8}
+        formatter={(val) => <span style={{ color: '#52c41a' }}>{val} / 10</span>}
+      />
+    </div>
+  );
+}
+```
+
+</demo>

components/statistic/demo/style.md

@@ -0,0 +1,33 @@
+<demo>
+
+### Value Style
+
+Customize value appearance with `valueStyle` and `groupSeparator`.
+
+```jsx live
+() => {
+  return (
+    <div style={{ display: 'flex', gap: '48px' }}>
+      <Statistic
+        title="Revenue"
+        value={1128930}
+        prefix="$"
+        valueStyle={{ color: '#52c41a' }}
+      />
+      <Statistic
+        title="Loss"
+        value={93120}
+        prefix="$"
+        valueStyle={{ color: '#f5222d' }}
+      />
+      <Statistic
+        title="No Separator"
+        value={9999999}
+        groupSeparator=""
+      />
+    </div>
+  );
+}
+```
+
+</demo>

components/statistic/index.md

@@ -1,4 +1,6 @@
 import Basic from './demo/basic.md'
+import Formatter from './demo/formatter.md'
+import Style from './demo/style.md'
 
 # Statistic
 
@@ -19,6 +21,10 @@ import { Statistic } from 'tiny-ui';
 <layout>
   <column>
     <Basic/>
+    <Formatter/>
+  </column>
+  <column>
+    <Style/>
   </column>
 </layout>