docs: update progress

packages/react-docs/pages/components/progress/custom-color.js

@@ -0,0 +1,59 @@
+import { Box, Divider, Flex, LinearProgress, Stack, TextLabel } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Stack spacing="4x">
+    <TextLabel>Indeterminate</TextLabel>
+    <LinearProgress size="md" variant="indeterminate" color="blue:60" width={320} />
+    <LinearProgress size="md" variant="indeterminate" color="teal:40" width={320} />
+    <Divider />
+    <TextLabel>Determinate</TextLabel>
+    <Flex alignItems="center" columnGap="3x">
+      <LinearProgress size="md" variant="determinate" value={40} color="blue:60" width={320}/>
+      <TextLabel>40%</TextLabel>
+    </Flex>
+    <Flex alignItems="center" columnGap="3x">
+      <LinearProgress size="md" variant="determinate" value={60} color="teal:40" width={320} />
+      <TextLabel>60%</TextLabel>
+    </Flex>
+    <Divider />
+    <TextLabel>Linear gradient</TextLabel>
+    <Flex
+      alignItems="center"
+      columnGap="2x"
+      justifyContent="space-between"
+      width={320}
+    >
+      <Box backgroundColor="blue:60" px="2x" py="1x" color="white:primary">
+        blue:60
+      </Box>
+      <Box backgroundColor="teal:40" px="2x" py="1x" color="black:primary">
+        teal:40
+      </Box>
+    </Flex>
+    <Flex alignItems="center" columnGap="3x">
+      <LinearProgress
+        size="md"
+        variant="determinate"
+        value={100}
+        color={['blue:60', 'teal:40']}
+        width={320}
+      />
+      <TextLabel>100%</TextLabel>
+    </Flex>
+    <Divider />
+    <TextLabel>Linear gradient with wave light</TextLabel>
+    <Flex alignItems="center" columnGap="3x">
+      <LinearProgress
+        size="md"
+        variant="determinate"
+        value={100}
+        color="linear-gradient(90deg, rgba(255, 255, 255, 0) 6.03%, rgba(255, 255, 255, 0.12) 16.32%, rgba(255, 255, 255, 0.12) 42.22%, rgba(255, 255, 255, 0) 60.67%), linear-gradient(90deg, #1E5EDE, #04CAA1)"
+        width={320}
+      />
+      <TextLabel>100%</TextLabel>
+    </Flex>
+  </Stack>
+);
+
+export default App;

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

@@ -0,0 +1,39 @@
+# Progress
+
+Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
+
+- **Determinate** indicators display how long an operation will take.
+- **Indeterminate** indicators visualize an unspecified wait time.
+
+## Import
+
+```js
+import {
+  LinearProgress,
+} from '@tonic-ui/react';
+```
+
+## Usage
+
+{render('./usage')}
+
+### Custom color
+
+You can use the `color` prop to change the color of the progress bar. The default color is `blue:60`.
+
+It accepts a valid CSS background color/image, a color token from the theme, or an array of colors to create a linear gradient.
+
+{render('./custom-color')}
+
+## Props
+
+### LinearProgress
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| color | string \| string[] | 'blue:60' | The color of the progress bar. It accepts a valid CSS background color/image, a color token from the theme, or an array of colors to create a linear gradient. |
+| min | numbner | 0 | The minimum value of the progress. |
+| max | number | 100 | The maximum value of the progress. |
+| size | string | 'sm' | The size of the progress bar. One of: 'xs', 'sm', 'md', 'lg' |
+| variant | string | 'indeterminate' | The variant to use. One of: 'indeterminate', 'determinate'<br />• Use indeterminate when there is no progress value.<br />• Use determinate when a progress value is defined. |
+| value | number |  | The value of the progress indicator for the determinate variant. |