Patch

example/storybook-nativewind/src/components/Progress/Progress.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-
-import { VStack, Text, Box, Heading, Center } from '@gluestack-ui/themed';
-
 import { Progress, ProgressFilledTrack } from '@/components/ui/progress';
+import { VStack } from '@/components/ui/vstack';
+import { Box } from '@/components/ui/box';
+import { Heading } from '@/components/ui/heading';
+import { Center } from '@/components/ui/center';
 
 const ProgressBasic = ({ value = 50, ...props }: any) => {
   return (
@@ -31,4 +32,4 @@ ProgressBasic.description =
 
 export default ProgressBasic;
 
-export { Progress, ProgressFilledTrack, VStack, Text, Box, Heading };
+export { Progress, ProgressFilledTrack, VStack, Box, Heading };

example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Progress | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Progress Component | Installation, Usage, and API
 
 description: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
 
@@ -165,17 +165,151 @@ We have outlined the various features that ensure the Fab component is accessibl
 
 Progress component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props).
 
-<!--
-## Spec Doc
+#### Progress
 
-Explore the comprehensive details of the Progress in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>xs | sm | md | lg | xl | 2xl</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
 
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6282-35554%26t%3DSqzrgr3fIhnmO5iO-1%26scaling%3Dscale-down%26page-id%3D6282%253A33652%26starting-point-node-id%3D6282%253A35554%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Value
+
+Progress component with value
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <VStack space="lg">
+        <Text size="lg">Downloading 55%</Text>
+        <Progress value={55} className='w-80 h-1'>
+          <ProgressFilledTrack className='h-1' />
+        </Progress>
+      </VStack>
+    `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+        Text,
+        Box,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Color
+
+You can add track color to progress bar as per our needs.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="3xl">
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-emerald-600'/>
+          </Progress>
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-amber-600'/>
+          </Progress>
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-fuchsia-600'/>
+          </Progress>
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-cyan-600'/>
+          </Progress>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Custom
+
+You can customize the progress bar. Below is the example where we have change the theme of progress bar.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="lg">
+        <Heading>Internal Storage</Heading>
+        <Progress value={46} className='w-[410px] h-2 bg-lime-100'>
+          <ProgressFilledTrack className='h-2 bg-lime-500' />
+        </Progress>
+        <Text size="md">14GB</Text>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+        Heading,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>

example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx

@@ -29,9 +29,6 @@ const progressStyle = tva({
       '2xl': 'h-6',
     },
   },
-  defaultVariants: {
-    size: 'md',
-  },
 });
 const progressFilledTrackStyle = tva({
   base: 'bg-primary-500 rounded-full',