docs: update space

packages/react-docs/pages/components/space/horizontal-spacing.js

@@ -0,0 +1,18 @@
+import { Button, Icon, Space } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <>
+    <Button variant="ghost" width="8x" height="8x" borderRadius="circle">
+      <Icon icon="add" />
+    </Button>
+    <Space width="2x" />
+    <Button variant="ghost" borderRadius="2rem">
+      <Icon icon="settings" />
+      <Space width="2x" />
+      Settings
+    </Button>
+  </>
+);
+
+export default App;

packages/react-docs/pages/components/space/index.page.mdx

@@ -0,0 +1,29 @@
+# Space
+
+Space is [Box](box) with `display="inline-flex"`. You can specify either `width` or `height` to add space between two elements.
+
+## Import
+
+```js
+import { Space } from '@tonic-ui/react';
+```
+
+## Usage
+
+### Horizontal spacing
+
+{render('./horizontal-spacing')}
+
+### Vertical spacing
+
+{render('./vertical-spacing')}
+
+## Props
+
+### Space
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | |
+| height | number \| string | | |
+| width | number \| string | | |

packages/react-docs/pages/components/space/vertical-spacing.js

@@ -0,0 +1,14 @@
+import { Flex, Input, Space, Text, TextLabel } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Flex flexDirection="column">
+    <TextLabel>Text label</TextLabel>
+    <Space height="2x" />
+    <Input placeholder="Text input" />
+    <Space height="1x" />
+    <Text size="xs">Help text for the text input</Text>
+</Flex>
+);
+
+export default App;