chore: format code

doc/docs/components/animation/ripple.mdx

@@ -5,25 +5,28 @@
 ```tsx
 import { Ripple, Button } from "@qwqui/core";
 
-export default function App() {
+const App = () => {
   const handleClick = () => {
     console.log("click!");
   };
+
   return (
     <Button>
       Button
       <Ripple color="#00000050" />
     </Button>
   );
-}
+};
+
+export default App;
 ```
 
 ## 自定义颜色
 
 ```tsx
 import { Ripple } from "@qwqui/core";
 
-export default function App() {
+const App = () => {
   return (
     <div
       style={{
@@ -42,15 +45,17 @@ export default function App() {
       <Ripple color="#66ccff" />
     </div>
   );
-}
+};
+
+export default App;
 ```
 
 ## 自定义透明度
 
 ```tsx
 import { Ripple } from "@qwqui/core";
 
-export default function App() {
+const App = () => {
   return (
     <div
       style={{
@@ -69,15 +74,17 @@ export default function App() {
       <Ripple color="#66ccff50" endOpacity={1} />
     </div>
   );
-}
+};
+
+export default App;
 ```
 
 ## 自定义过度时间
 
 ```tsx
 import { Ripple } from "@qwqui/core";
 
-export default function App() {
+const App = () => {
   return (
     <div
       style={{
@@ -96,15 +103,17 @@ export default function App() {
       <Ripple color="#66ccff" duration={3000} />
     </div>
   );
-}
+};
+
+export default App;
 ```
 
 ## 自定义模糊程度
 
 ```tsx
 import { Ripple } from "@qwqui/core";
 
-export default function App() {
+const App = () => {
   return (
     <div
       style={{
@@ -123,15 +132,17 @@ export default function App() {
       <Ripple blur="32px" />
     </div>
   );
-}
+};
+
+export default App;
 ```
 
 ## 自定义动画名称
 
 ```tsx
 import { Ripple } from "@qwqui/core";
 
-export default function App() {
+const App = () => {
   return (
     <div
       style={{
@@ -150,7 +161,9 @@ export default function App() {
       <Ripple animation-name="linear" />
     </div>
   );
-}
+};
+
+export default App;
 ```
 
 ## Props

doc/docs/components/button/ButtonControls.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@qwqui/core";
 
-export default function ButtonControls() {
+const ButtonControls = () => {
   const [color, setColor] = useState('blue');
   const [size, setSize] = useState('md');
   const [radius, setRadius] = useState('md');
@@ -13,7 +13,7 @@ import { Button } from "@qwqui/core";
 
 function Demo() {
   return <Button color="${color}" size="${size}"${useCustomRadius ? ` radius="${radius}"` : ''}${strong ? ` strong={${strong}}` : ''}>Button</Button>;
-}`.trimStart()
+}`.trimStart();
 
   const COLORS = ['gray', 'red', 'pink', 'grape', 'violet', 'indigo',
     'blue', 'cyan', 'teal', 'green', 'lime', 'yellow', 'orange'];
@@ -68,5 +68,7 @@ function Demo() {
         {codeStr}
       </pre>
     </>
-  )
-};
+  );
+};
+
+export default ButtonControls;

doc/docs/components/button/button.mdx

@@ -20,7 +20,7 @@ export default function App() {
       <Button size={"lg"}>Button</Button>
       <Button size={"xl"}>Button</Button>
     </div>
-  )
+  );
 }
 ```
 
@@ -46,8 +46,7 @@ export default function App() {
         <Button color={"orange"}>Orange</Button>
       </div>
     </div>
-
-  )
+  );
 }
 ```
 
@@ -62,7 +61,7 @@ export default function App() {
       <Button>Normal</Button>
       <Button strong>Strong</Button>
     </div>
-  )
+  );
 }
 ```
 
@@ -77,6 +76,6 @@ export default function App() {
       <Button>Enabled</Button>
       <Button disabled>Disabled</Button>
     </div>
-  )
+  );
 }
-```
+```

doc/docs/components/center/center.mdx

@@ -6,13 +6,15 @@
 import React from 'react';
 import { Center } from '@qwqui/core';
 
-export default function Example() {
+const App = () => {
   return (
     <Center>
       <span>Your content here</span>
     </Center>
-  )
+  );
 };
+
+export default App;
 ```
 
 
@@ -21,4 +23,4 @@ export default function Example() {
 | 名称 | 类型 | 介绍 |
 |---|---|---|
 | children | `React.ReactNode` | 要居中的内容。 |
-| inline | `boolen` | 如果为`true`，那么`display`属性则为`inline-flex`,否则`display`属性则为`false` |
+| inline | `boolen` | 如果为`true`，那么`display`属性则为`inline-flex`,否则`display`属性则为`false` |

packages/components/button/src/button.tsx

@@ -14,7 +14,7 @@ export const Button = (props: ButtonProps) => {
     }
 
     if (props.size == 'xl') {
-      return 'xl'
+      return 'xl';
     }
     return 'md';
   }
@@ -53,13 +53,13 @@ export const Button = (props: ButtonProps) => {
 
 
 export interface ButtonProps {
-  children?: React.ReactNode,
-  onClick?: () => void,
-  disabled?: boolean,
-  variant?: string,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  radius?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  children?: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  radius?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
   color?: 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo'
-    | 'blue' | 'cyan' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange',
-  strong?: boolean,
-}
+    | 'blue' | 'cyan' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange';
+  strong?: boolean;
+}