From efe306a6347fa2538ff123863f33fd0548f7af50 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 21 Oct 2022 21:44:28 +0900
Subject: [PATCH 01/25] move progress active

---
 docs/.vitepress/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6ec6c3a..2402fbf 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -42,6 +42,7 @@ function getComponents() {
     { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
     { text: 'Card', link: 'components/card/card.md' },
     { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
+    { text: 'Progress', link: 'components/progress/progress.md' },
     { text: 'Spinner', link: '/components/spinner/spinner.md' },
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
@@ -53,7 +54,6 @@ function getComponents() {
     { text: '- Footer', link: 'components/footer/footer.md' },
     { text: '- Navbar', link: 'components/navbar/navbar.md' },
     { text: '- Pagination', link: 'components/pagination/pagination.md' },
-    { text: '- Progress', link: 'components/progress/progress.md' },
     { text: '- Rating', link: 'components/rating/rating.md' },
     { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
     { text: '- Table', link: 'components/table/table.md' },

From 7e75e047904dd00cab6fb9ce49b445109fea8641 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Sat, 22 Oct 2022 22:52:36 +0900
Subject: [PATCH 02/25] create useProgressClasses.ts

---
 .node-version                                  |  1 +
 src/components/Progress/Progress.vue           |  3 +++
 .../Progress/composables/useProgressClasses.ts | 18 ++++++++++++++++++
 3 files changed, 22 insertions(+)
 create mode 100644 .node-version
 create mode 100644 src/components/Progress/composables/useProgressClasses.ts

diff --git a/.node-version b/.node-version
new file mode 100644
index 0000000..357607e
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+16.6.2
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 378c2d8..48f12ef 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -6,6 +6,7 @@
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 import type { PropType } from 'vue'
+import { useProgressClasses } from './composables/useProgressClasses'
 
 const props = defineProps({
   color: {
@@ -34,4 +35,6 @@ const props = defineProps({
   },
 })
 
+const { wrapperClasses } = useProgressClasses(toRefs(props))
+
 </script>
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
new file mode 100644
index 0000000..1e1ebd6
--- /dev/null
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -0,0 +1,18 @@
+const progressColorClasses: ProgressClassMap<ProgressVariant> = {
+  default: {
+    default: '',
+    blue: 'bg-blue-600',
+    alternative: '',
+    dark: 'bg-gray-600 dark:bg-gray-300',
+    light: '',
+    green: 'bg-green-600 dark:bg-green-500',
+    red: 'bg-red-600 dark:bg-red-500',
+    yellow: 'bg-yellow-400',
+    purple: 'bg-purple-600 dark:bg-purple-500',
+    pink: '',
+  },
+}
+
+export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>} {
+  
+}
\ No newline at end of file

From 373fd8f60287438230b9caf3d6a0d386e224e276 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Sun, 23 Oct 2022 23:42:38 +0900
Subject: [PATCH 03/25] create types.ts

---
 src/components/Progress/composables/useProgressClasses.ts | 7 ++++++-
 src/components/Progress/types.ts                          | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Progress/types.ts

diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 1e1ebd6..23d56ad 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -13,6 +13,11 @@ const progressColorClasses: ProgressClassMap<ProgressVariant> = {
   },
 }
 
+export type UseProgressClassesProps = {
+  color: Ref<progressColor>
+}
+
 export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>} {
-  
+  let colorClasses = '';
+  colorClasses = progressColorClasses(props.gradient.value as unknown as keyof typeof progressColorClasses.default)
 }
\ No newline at end of file
diff --git a/src/components/Progress/types.ts b/src/components/Progress/types.ts
new file mode 100644
index 0000000..8d5b11a
--- /dev/null
+++ b/src/components/Progress/types.ts
@@ -0,0 +1 @@
+export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
\ No newline at end of file

From d302645ca172d807596006cf5bdcc3b1eba2de48 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 22:04:59 +0900
Subject: [PATCH 04/25] activate useProgressClasses

---
 src/components/Progress/Progress.vue          |  4 +--
 .../composables/useProgressClasses.ts         | 27 ++++++++++++++++---
 src/components/Progress/types.ts              |  3 ++-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 48f12ef..3af26b4 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
+    <div class="bg-blue-600 h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -11,7 +11,7 @@ import { useProgressClasses } from './composables/useProgressClasses'
 const props = defineProps({
   color: {
     type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
-    default: 'blue',
+    default: 'yellow',
   },
   label: {
     type: String,
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 23d56ad..a77e86c 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -1,3 +1,11 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import classNames from 'classnames'
+import type { ProgressVariant } from '../types'
+
+
+export type ProgressClassMap<T extends string> = { default: Record<T, string> }
+
 const progressColorClasses: ProgressClassMap<ProgressVariant> = {
   default: {
     default: '',
@@ -14,10 +22,23 @@ const progressColorClasses: ProgressClassMap<ProgressVariant> = {
 }
 
 export type UseProgressClassesProps = {
-  color: Ref<progressColor>
+  color: Ref<ProgressVariant>
 }
 
 export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>} {
-  let colorClasses = '';
-  colorClasses = progressColorClasses(props.gradient.value as unknown as keyof typeof progressColorClasses.default)
+  
+  const bindClasses = computed(() => {
+    let colorClass = ''
+
+    const color = props.color.value
+    colorClass = progressColorClasses.default[color as unknown as keyof typeof progressColorClasses.default]
+
+    return classNames(
+      colorClass
+    )
+  })
+
+  return {
+    wrapperClasses: bindClasses,
+  }
 }
\ No newline at end of file
diff --git a/src/components/Progress/types.ts b/src/components/Progress/types.ts
index 8d5b11a..2b8a944 100644
--- a/src/components/Progress/types.ts
+++ b/src/components/Progress/types.ts
@@ -1 +1,2 @@
-export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
\ No newline at end of file
+export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
+export type ProgressVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'

From 42ed8cfc194b16705dd3d2141aa8ba89c96c4de1 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 22:11:26 +0900
Subject: [PATCH 05/25] add color classes

---
 src/components/Progress/Progress.vue                   |  4 ++--
 .../Progress/composables/useProgressClasses.ts         | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 3af26b4..9d4665a 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-    <div class="bg-blue-600 h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
+    <div class="h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -11,7 +11,7 @@ import { useProgressClasses } from './composables/useProgressClasses'
 const props = defineProps({
   color: {
     type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
-    default: 'yellow',
+    default: 'pink',
   },
   label: {
     type: String,
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index a77e86c..d3f67d7 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -8,16 +8,16 @@ export type ProgressClassMap<T extends string> = { default: Record<T, string> }
 
 const progressColorClasses: ProgressClassMap<ProgressVariant> = {
   default: {
-    default: '',
-    blue: 'bg-blue-600',
-    alternative: '',
+    default: 'bg-blue-600 dark:bg-blue-600',
+    blue: 'bg-blue-600 dark:bg-blue-600',
+    alternative: 'dark:bg-gray-800',
     dark: 'bg-gray-600 dark:bg-gray-300',
-    light: '',
+    light: 'bg-white dark:bg-gray-800',
     green: 'bg-green-600 dark:bg-green-500',
     red: 'bg-red-600 dark:bg-red-500',
     yellow: 'bg-yellow-400',
     purple: 'bg-purple-600 dark:bg-purple-500',
-    pink: '',
+    pink: 'bg-pink-700 dark:bg-pink-600',
   },
 }
 

From a8cfc85b36fe14b1ed10d0d4a51781cc8c55540f Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 22:32:12 +0900
Subject: [PATCH 06/25] add size logic

---
 .../Button/composables/useButtonClasses.ts    |  1 -
 src/components/Progress/Progress.vue          |  8 ++--
 .../composables/useProgressClasses.ts         | 39 ++++++++++++++-----
 src/components/Progress/types.ts              |  1 +
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/Button/composables/useButtonClasses.ts b/src/components/Button/composables/useButtonClasses.ts
index ec71268..b83fae4 100644
--- a/src/components/Button/composables/useButtonClasses.ts
+++ b/src/components/Button/composables/useButtonClasses.ts
@@ -122,7 +122,6 @@ const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
   },
 }
 
-
 const buttonSizeClasses: Record<ButtonSize, string> = {
   xs: 'text-xs px-2 py-1',
   sm: 'text-sm px-3 py-1.5',
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 9d4665a..64b2952 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-    <div class="h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
+  <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClass">
+    <div class="rounded-full" :class="wrapperClasses" style="width: 45%"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -31,10 +31,10 @@ const props = defineProps({
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
-    default: 'md',
+    default: 'lg',
   },
 })
 
-const { wrapperClasses } = useProgressClasses(toRefs(props))
+const { wrapperClasses, outerClass } = useProgressClasses(toRefs(props))
 
 </script>
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index d3f67d7..ccc8293 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -1,13 +1,14 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 import classNames from 'classnames'
-import type { ProgressVariant } from '../types'
+import type { ProgressVariant, ProgressSize } from '../types'
 
 
-export type ProgressClassMap<T extends string> = { default: Record<T, string> }
+// export type ProgressClassMap<T extends string> = { default: Record<T, string> }
 
-const progressColorClasses: ProgressClassMap<ProgressVariant> = {
-  default: {
+const progressColorClasses: Record<ProgressVariant, string> = {
+  // const progressColorClasses: ProgressClassMap<ProgressVariant> = {
+  // default: {
     default: 'bg-blue-600 dark:bg-blue-600',
     blue: 'bg-blue-600 dark:bg-blue-600',
     alternative: 'dark:bg-gray-800',
@@ -18,27 +19,47 @@ const progressColorClasses: ProgressClassMap<ProgressVariant> = {
     yellow: 'bg-yellow-400',
     purple: 'bg-purple-600 dark:bg-purple-500',
     pink: 'bg-pink-700 dark:bg-pink-600',
-  },
+  // },
+}
+
+const progressSizeClasses: Record<ProgressSize, string> = {
+  sm: 'text-sm h-1.5',
+  md: 'text-sm h-2.5',
+  lg: 'text-base h-4',
+  xl: 'text-base h-6',
 }
 
 export type UseProgressClassesProps = {
   color: Ref<ProgressVariant>
+  size: Ref<ProgressSize>
 }
 
-export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>} {
+export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>, outerClass: Ref<string>} {
   
   const bindClasses = computed(() => {
     let colorClass = ''
+    colorClass = progressColorClasses[props.color.value]
 
-    const color = props.color.value
-    colorClass = progressColorClasses.default[color as unknown as keyof typeof progressColorClasses.default]
+    let sizeClass = ''
+    sizeClass = progressSizeClasses[props.size.value]
 
     return classNames(
-      colorClass
+      colorClass,
+      sizeClass
     )
   })
 
+  const outerClass = computed(() => {
+    let outerSizeClass = ''
+    outerSizeClass = progressSizeClasses[props.size.value]
+    return classNames(
+      outerSizeClass
+    )
+  })
+
+  
   return {
     wrapperClasses: bindClasses,
+    outerClass
   }
 }
\ No newline at end of file
diff --git a/src/components/Progress/types.ts b/src/components/Progress/types.ts
index 2b8a944..73e120b 100644
--- a/src/components/Progress/types.ts
+++ b/src/components/Progress/types.ts
@@ -1,2 +1,3 @@
 export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
 export type ProgressVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
+export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
\ No newline at end of file

From 910541c061a3e0f56ff5fe27482bc1dda2e784c2 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 23:11:31 +0900
Subject: [PATCH 07/25] add outer label

---
 src/components/Progress/Progress.vue          | 26 ++++++++----
 .../composables/useProgressClasses.ts         | 42 ++++++++++++++-----
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 64b2952..5f9be68 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,6 +1,16 @@
 <template>
-  <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClass">
-    <div class="rounded-full" :class="wrapperClasses" style="width: 45%"></div>
+  <template v-if="label || (labelProgress && labelPosition === 'outside')">
+    <div class="flex justify-between mb-1">
+      <span v-show="label || (labelProgress && labelPosition === 'outside')" class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
+      <span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">45%</span>
+    </div>
+  </template>
+  <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClasses">
+    <div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" style="width: 45%">
+      <template v-if="labelProgress && labelPosition === 'inside'">
+        {{ progress }}%
+      </template>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -15,26 +25,26 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: 'progressbar',
+    default: 'rate',
   },
   labelPosition: {
     type: String, // 'inside' | 'outside' | 'none'
-    default: 'none',
+    default: 'inside',
   },
   labelProgress: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   progress: {
     type: Number,
-    default: 0,
+    default: 55,
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
-    default: 'lg',
+    default: 'md',
   },
 })
 
-const { wrapperClasses, outerClass } = useProgressClasses(toRefs(props))
+const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
 
 </script>
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index ccc8293..2e93f10 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -6,7 +6,7 @@ import type { ProgressVariant, ProgressSize } from '../types'
 
 // export type ProgressClassMap<T extends string> = { default: Record<T, string> }
 
-const progressColorClasses: Record<ProgressVariant, string> = {
+const barColorClasses: Record<ProgressVariant, string> = {
   // const progressColorClasses: ProgressClassMap<ProgressVariant> = {
   // default: {
     default: 'bg-blue-600 dark:bg-blue-600',
@@ -22,11 +22,24 @@ const progressColorClasses: Record<ProgressVariant, string> = {
   // },
 }
 
+const outsideTextColorClasses: Record<ProgressVariant, string> = {
+    default: 'text-blue-700 dark:text-blue-500',
+    blue: 'text-blue-700 dark:text-blue-500',
+    alternative: 'dark:bg-gray-800',
+    dark: 'dark:text-white',
+    light: 'text-white dark:text-gray-800',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    yellow: 'text-yellow-700 dark:text-yellow-500',
+    purple: 'text-purple-700 dark:text-purple-500',
+    pink: 'text-pink-700 dark:text-pink-600',
+}
+
 const progressSizeClasses: Record<ProgressSize, string> = {
-  sm: 'text-sm h-1.5',
-  md: 'text-sm h-2.5',
-  lg: 'text-base h-4',
-  xl: 'text-base h-6',
+  sm: 'h-1.5 text-xs leading-none',
+  md: 'h-2.5 text-xs leading-none',
+  lg: 'h-4 text-sm leading-none',
+  xl: 'h-6 text-base leading-tight',
 }
 
 export type UseProgressClassesProps = {
@@ -34,11 +47,11 @@ export type UseProgressClassesProps = {
   size: Ref<ProgressSize>
 }
 
-export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>, outerClass: Ref<string>} {
+export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {
   
   const bindClasses = computed(() => {
     let colorClass = ''
-    colorClass = progressColorClasses[props.color.value]
+    colorClass = barColorClasses[props.color.value]
 
     let sizeClass = ''
     sizeClass = progressSizeClasses[props.size.value]
@@ -49,7 +62,7 @@ export function useProgressClasses(props: UseProgressClassesProps): { wrapperCla
     )
   })
 
-  const outerClass = computed(() => {
+  const outerClasses = computed(() => {
     let outerSizeClass = ''
     outerSizeClass = progressSizeClasses[props.size.value]
     return classNames(
@@ -57,9 +70,18 @@ export function useProgressClasses(props: UseProgressClassesProps): { wrapperCla
     )
   })
 
+  const outsideLabelClasses = computed(() => {
+    let outsideLabelClass = ''
+    outsideLabelClass = outsideTextColorClasses[props.color.value]
+    return classNames(
+      outsideLabelClass
+    )
+  })
+
   
   return {
-    wrapperClasses: bindClasses,
-    outerClass
+    innerClasses: bindClasses,
+    outerClasses,
+    outsideLabelClasses
   }
 }
\ No newline at end of file

From 11490b1e9a95f03d707a65c0ce15755aefce988d Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 23:23:51 +0900
Subject: [PATCH 08/25] prepare initial progress.md

---
 docs/components/progress/progress.md | 12 ++++++++++++
 src/components/Progress/Progress.vue | 12 +++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/docs/components/progress/progress.md b/docs/components/progress/progress.md
index 3ab4a7a..5518699 100644
--- a/docs/components/progress/progress.md
+++ b/docs/components/progress/progress.md
@@ -13,3 +13,15 @@ import { Progress } from 'flowbite-vue'
 ```
 
 <ProgressExample />
+
+## Sizes
+You can also use different sizes by using various sizing.
+
+## With label inside
+Here is an example of using a progress bar with the label inside the bar.
+
+## With label outside
+And this is an example of using a progress bar outside the bar.
+
+## Colors
+You can also apply color.
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 5f9be68..7eabc4c 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -2,11 +2,11 @@
   <template v-if="label || (labelProgress && labelPosition === 'outside')">
     <div class="flex justify-between mb-1">
       <span v-show="label || (labelProgress && labelPosition === 'outside')" class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
-      <span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">45%</span>
+      <span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">{{ progress }}%</span>
     </div>
   </template>
   <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClasses">
-    <div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" style="width: 45%">
+    <div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" :style="{ width: progress + '%' }">
       <template v-if="labelProgress && labelPosition === 'inside'">
         {{ progress }}%
       </template>
@@ -25,7 +25,7 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: 'rate',
+    default: '',
   },
   labelPosition: {
     type: String, // 'inside' | 'outside' | 'none'
@@ -37,14 +37,16 @@ const props = defineProps({
   },
   progress: {
     type: Number,
-    default: 55,
+    default: 45,
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
-    default: 'md',
+    default: 'lg',
   },
 })
 
+const widthStyle = computed(() => "width:" + props.progress + "%")
+
 const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
 
 </script>

From eb6f4bd33aa5e42b41f4e44f786015a28dffb4ae Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Sat, 29 Oct 2022 11:22:25 +0900
Subject: [PATCH 09/25] prepate progress.md

---
 .../examples/ProgressColorExample.vue         | 15 ++++
 .../progress/examples/ProgressExample.vue     |  2 +-
 .../examples/ProgressInsideLabelExample.vue   |  6 ++
 .../examples/ProgressOutsideLabelExample.vue  |  6 ++
 .../progress/examples/ProgressSizeExample.vue | 11 +++
 docs/components/progress/progress.md          | 77 ++++++++++++++++++-
 src/components/Progress/Progress.vue          | 10 ++-
 .../composables/useProgressClasses.ts         | 10 +--
 src/components/Progress/types.ts              |  3 +-
 9 files changed, 125 insertions(+), 15 deletions(-)
 create mode 100644 docs/components/progress/examples/ProgressColorExample.vue
 create mode 100644 docs/components/progress/examples/ProgressInsideLabelExample.vue
 create mode 100644 docs/components/progress/examples/ProgressOutsideLabelExample.vue
 create mode 100644 docs/components/progress/examples/ProgressSizeExample.vue

diff --git a/docs/components/progress/examples/ProgressColorExample.vue b/docs/components/progress/examples/ProgressColorExample.vue
new file mode 100644
index 0000000..4015895
--- /dev/null
+++ b/docs/components/progress/examples/ProgressColorExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw flex flex-col grid gap-4">
+    <Progress label="Default" progress="45"></Progress>
+    <Progress color="dark" label="Dark" progress="45"></Progress>
+    <Progress color="blue" label="Blue" progress="45"></Progress>
+    <Progress color="red" label="Red" progress="45"></Progress>
+    <Progress color="green" label="Green" progress="45"></Progress>
+    <Progress color="yellow" label="Yellow" progress="45"></Progress>
+    <Progress color="indigo" label="Indigo" progress="45"></Progress>
+    <Progress color="purple" label="Purple" progress="45"></Progress>
+  </div>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/progress/examples/ProgressExample.vue b/docs/components/progress/examples/ProgressExample.vue
index 62c6704..bd62efb 100644
--- a/docs/components/progress/examples/ProgressExample.vue
+++ b/docs/components/progress/examples/ProgressExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Progress></Progress>
+    <Progress progress="45"></Progress>
   </div>
 </template>
 <script setup>
diff --git a/docs/components/progress/examples/ProgressInsideLabelExample.vue b/docs/components/progress/examples/ProgressInsideLabelExample.vue
new file mode 100644
index 0000000..8f04520
--- /dev/null
+++ b/docs/components/progress/examples/ProgressInsideLabelExample.vue
@@ -0,0 +1,6 @@
+<template>
+  <Progress labelProgress="true" labelPosition="inside" progress="45"></Progress>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/progress/examples/ProgressOutsideLabelExample.vue b/docs/components/progress/examples/ProgressOutsideLabelExample.vue
new file mode 100644
index 0000000..2af7377
--- /dev/null
+++ b/docs/components/progress/examples/ProgressOutsideLabelExample.vue
@@ -0,0 +1,6 @@
+<template>
+  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/progress/examples/ProgressSizeExample.vue b/docs/components/progress/examples/ProgressSizeExample.vue
new file mode 100644
index 0000000..35f9469
--- /dev/null
+++ b/docs/components/progress/examples/ProgressSizeExample.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex flex-col grid gap-4">
+    <Progress size="sm" label="Small" progress="45"></Progress>
+    <Progress size="md" label="Medium" progress="45"></Progress>
+    <Progress size="lg" label="Large" progress="45"></Progress>
+    <Progress size="xl" label="Extra Large" progress="45"></Progress>
+  </div>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/progress/progress.md b/docs/components/progress/progress.md
index 5518699..7ea9b9e 100644
--- a/docs/components/progress/progress.md
+++ b/docs/components/progress/progress.md
@@ -1,14 +1,22 @@
 <script setup>
 import ProgressExample from './examples/ProgressExample.vue'
+import ProgressSizeExample from './examples/ProgressSizeExample.vue'
+import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
+import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
+import ProgressColorExample from './examples/ProgressColorExample.vue'
+
+
 </script>
 # Vue Progress Bar Component - Flowbite
 
+## Default
+
 ```vue
 <script setup>
 import { Progress } from 'flowbite-vue'
 </script>
 <template>
-  <Progress></Progress>
+  <Progress progress="45"></Progress>
 </template>
 ```
 
@@ -17,11 +25,78 @@ import { Progress } from 'flowbite-vue'
 ## Sizes
 You can also use different sizes by using various sizing.
 
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <!-- small size -->
+  <Progress size="sm" label="Small" progress="45"></Progress>
+  <!-- medium size -->
+  <Progress size="md" label="Medium" progress="45"></Progress>
+  <!-- large size -->
+  <Progress size="lg" label="Large" progress="45"></Progress>
+  <!-- extra large size -->
+  <Progress size="xl" label="Extra Large" progress="45"></Progress>
+</template>
+```
+
+<ProgressSizeExample />
+
 ## With label inside
 Here is an example of using a progress bar with the label inside the bar.
 
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <Progress labelProgress="true" labelPosition="inside" progress="45"></Progress>
+</template>
+```
+
+<ProgressInsideLabelExample />
+
 ## With label outside
 And this is an example of using a progress bar outside the bar.
 
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
+</template>
+```
+
+<ProgressOutsideLabelExample />
+
 ## Colors
 You can also apply color.
+
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <!-- Default color -->
+  <Progress label="Default" progress="45"></Progress>
+  <!-- Dark -->
+  <Progress color="dark" label="Dark" progress="45"></Progress>
+  <!-- Blue -->
+  <Progress color="blue" label="Blue" progress="45"></Progress>
+  <!-- Red -->
+  <Progress color="red" label="Red" progress="45"></Progress>
+  <!-- Green -->
+  <Progress color="green" label="Green" progress="45"></Progress>
+  <!-- Yellow -->
+  <Progress color="yellow" label="Yellow" progress="45"></Progress>
+  <!-- Indigo -->
+  <Progress color="indigo" label="Indigo" progress="45"></Progress>
+  <!-- Purple -->
+  <Progress color="purple" label="Purple" progress="45"></Progress>
+
+</template>
+```
+
+<ProgressColorExample />
\ No newline at end of file
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 7eabc4c..e8e768f 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,4 +1,5 @@
 <template>
+  <div>
   <template v-if="label || (labelProgress && labelPosition === 'outside')">
     <div class="flex justify-between mb-1">
       <span v-show="label || (labelProgress && labelPosition === 'outside')" class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
@@ -12,6 +13,7 @@
       </template>
     </div>
   </div>
+</div>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -20,8 +22,8 @@ import { useProgressClasses } from './composables/useProgressClasses'
 
 const props = defineProps({
   color: {
-    type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
-    default: 'pink',
+    type: String, // 'default' | 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
+    default: 'default',
   },
   label: {
     type: String,
@@ -33,11 +35,11 @@ const props = defineProps({
   },
   labelProgress: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   progress: {
     type: Number,
-    default: 45,
+    default: 0,
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 2e93f10..339f0b4 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -11,28 +11,24 @@ const barColorClasses: Record<ProgressVariant, string> = {
   // default: {
     default: 'bg-blue-600 dark:bg-blue-600',
     blue: 'bg-blue-600 dark:bg-blue-600',
-    alternative: 'dark:bg-gray-800',
     dark: 'bg-gray-600 dark:bg-gray-300',
-    light: 'bg-white dark:bg-gray-800',
     green: 'bg-green-600 dark:bg-green-500',
     red: 'bg-red-600 dark:bg-red-500',
     yellow: 'bg-yellow-400',
+    indigo: 'bg-indigo-600 dark:bg-indigo-500',
     purple: 'bg-purple-600 dark:bg-purple-500',
-    pink: 'bg-pink-700 dark:bg-pink-600',
   // },
 }
 
 const outsideTextColorClasses: Record<ProgressVariant, string> = {
-    default: 'text-blue-700 dark:text-blue-500',
+    default: '',
     blue: 'text-blue-700 dark:text-blue-500',
-    alternative: 'dark:bg-gray-800',
     dark: 'dark:text-white',
-    light: 'text-white dark:text-gray-800',
     green: 'text-green-700 dark:text-green-500',
     red: 'text-red-700 dark:text-red-500',
     yellow: 'text-yellow-700 dark:text-yellow-500',
+    indigo: 'text-indigo-700 dark:text-indigo-500',
     purple: 'text-purple-700 dark:text-purple-500',
-    pink: 'text-pink-700 dark:text-pink-600',
 }
 
 const progressSizeClasses: Record<ProgressSize, string> = {
diff --git a/src/components/Progress/types.ts b/src/components/Progress/types.ts
index 73e120b..11b7ebf 100644
--- a/src/components/Progress/types.ts
+++ b/src/components/Progress/types.ts
@@ -1,3 +1,2 @@
-export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
-export type ProgressVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
+export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
 export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
\ No newline at end of file

From be84485c45677901678327df92e9c2e3d935e54c Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Sat, 29 Oct 2022 11:23:50 +0900
Subject: [PATCH 10/25] remove unnecessary comments

---
 .../composables/useProgressClasses.ts         | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 339f0b4..8b026f2 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -3,21 +3,15 @@ import { computed } from 'vue'
 import classNames from 'classnames'
 import type { ProgressVariant, ProgressSize } from '../types'
 
-
-// export type ProgressClassMap<T extends string> = { default: Record<T, string> }
-
 const barColorClasses: Record<ProgressVariant, string> = {
-  // const progressColorClasses: ProgressClassMap<ProgressVariant> = {
-  // default: {
-    default: 'bg-blue-600 dark:bg-blue-600',
-    blue: 'bg-blue-600 dark:bg-blue-600',
-    dark: 'bg-gray-600 dark:bg-gray-300',
-    green: 'bg-green-600 dark:bg-green-500',
-    red: 'bg-red-600 dark:bg-red-500',
-    yellow: 'bg-yellow-400',
-    indigo: 'bg-indigo-600 dark:bg-indigo-500',
-    purple: 'bg-purple-600 dark:bg-purple-500',
-  // },
+  default: 'bg-blue-600 dark:bg-blue-600',
+  blue: 'bg-blue-600 dark:bg-blue-600',
+  dark: 'bg-gray-600 dark:bg-gray-300',
+  green: 'bg-green-600 dark:bg-green-500',
+  red: 'bg-red-600 dark:bg-red-500',
+  yellow: 'bg-yellow-400',
+  indigo: 'bg-indigo-600 dark:bg-indigo-500',
+  purple: 'bg-purple-600 dark:bg-purple-500',
 }
 
 const outsideTextColorClasses: Record<ProgressVariant, string> = {

From de032264feeff034d066dba66f14a692e00c7a37 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Sat, 29 Oct 2022 11:31:17 +0900
Subject: [PATCH 11/25] change default value

---
 .../progress/examples/ProgressInsideLabelExample.vue          | 2 +-
 docs/components/progress/progress.md                          | 2 +-
 src/components/Progress/Progress.vue                          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/components/progress/examples/ProgressInsideLabelExample.vue b/docs/components/progress/examples/ProgressInsideLabelExample.vue
index 8f04520..799bb81 100644
--- a/docs/components/progress/examples/ProgressInsideLabelExample.vue
+++ b/docs/components/progress/examples/ProgressInsideLabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <Progress labelProgress="true" labelPosition="inside" progress="45"></Progress>
+  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
 </template>
 <script setup>
 import { Progress } from '../../../../src/index'
diff --git a/docs/components/progress/progress.md b/docs/components/progress/progress.md
index 7ea9b9e..10c7707 100644
--- a/docs/components/progress/progress.md
+++ b/docs/components/progress/progress.md
@@ -51,7 +51,7 @@ Here is an example of using a progress bar with the label inside the bar.
 import { Progress } from 'flowbite-vue'
 </script>
 <template>
-  <Progress labelProgress="true" labelPosition="inside" progress="45"></Progress>
+  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
 </template>
 ```
 
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index e8e768f..b462a73 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -31,7 +31,7 @@ const props = defineProps({
   },
   labelPosition: {
     type: String, // 'inside' | 'outside' | 'none'
-    default: 'inside',
+    default: 'none',
   },
   labelProgress: {
     type: Boolean,
@@ -43,7 +43,7 @@ const props = defineProps({
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
-    default: 'lg',
+    default: 'md',
   },
 })
 

From f2a0bb732c4257f69992a0f19819d893138bfa30 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:56:56 +0300
Subject: [PATCH 12/25] Update src/components/Progress/Progress.vue

---
 src/components/Progress/Progress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index b462a73..f2b9860 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -2,7 +2,7 @@
   <div>
   <template v-if="label || (labelProgress && labelPosition === 'outside')">
     <div class="flex justify-between mb-1">
-      <span v-show="label || (labelProgress && labelPosition === 'outside')" class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
+      <span class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
       <span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">{{ progress }}%</span>
     </div>
   </template>

From 2f7b0780f4f3e988376f310ebef88204405726d0 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:04 +0300
Subject: [PATCH 13/25] Update src/components/Progress/Progress.vue

---
 src/components/Progress/Progress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index f2b9860..77c53bb 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -16,7 +16,7 @@
 </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import type { PropType } from 'vue'
 import { useProgressClasses } from './composables/useProgressClasses'
 

From 2dc7fb674c02a1814c246b04de2ad869c00a8212 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:11 +0300
Subject: [PATCH 14/25] Update src/components/Progress/Progress.vue

---
 src/components/Progress/Progress.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 77c53bb..f85eba7 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -19,6 +19,7 @@
 import { toRefs } from 'vue'
 import type { PropType } from 'vue'
 import { useProgressClasses } from './composables/useProgressClasses'
+import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
 
 const props = defineProps({
   color: {

From 8891e0f9806d57cac3b39bfebedaac03ecc2521a Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:16 +0300
Subject: [PATCH 15/25] Update src/components/Progress/Progress.vue

---
 src/components/Progress/Progress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index f85eba7..88d4016 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -23,7 +23,7 @@ import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './typ
 
 const props = defineProps({
   color: {
-    type: String, // 'default' | 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
+    type: String as PropType<ProgressVariant>,
     default: 'default',
   },
   label: {

From e1e193020033c3fb434fdf6f094906718d676664 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:21 +0300
Subject: [PATCH 16/25] Update src/components/Progress/Progress.vue

---
 src/components/Progress/Progress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 88d4016..5cdb52a 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -31,7 +31,7 @@ const props = defineProps({
     default: '',
   },
   labelPosition: {
-    type: String, // 'inside' | 'outside' | 'none'
+    type: String as PropType<ProgressLabelPosition>,
     default: 'none',
   },
   labelProgress: {

From 2785418325668f8c6ad7a1396b333bebeb156e8d Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:27 +0300
Subject: [PATCH 17/25] Update
 src/components/Progress/composables/useProgressClasses.ts

---
 src/components/Progress/composables/useProgressClasses.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 8b026f2..096ecc7 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -35,6 +35,7 @@ const progressSizeClasses: Record<ProgressSize, string> = {
 export type UseProgressClassesProps = {
   color: Ref<ProgressVariant>
   size: Ref<ProgressSize>
+  labelPosition: Ref<ProgressLabelPosition>
 }
 
 export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {

From 36678aa7c672de9956ceff88ce3a488d3d506d59 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:32 +0300
Subject: [PATCH 18/25] Update
 src/components/Progress/composables/useProgressClasses.ts

---
 src/components/Progress/composables/useProgressClasses.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 096ecc7..0bd8253 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -49,7 +49,7 @@ export function useProgressClasses(props: UseProgressClassesProps): { innerClass
 
     return classNames(
       colorClass,
-      sizeClass
+      sizeClass,
     )
   })
 

From 3ce752fb3c7e9ee80f5b56e860c93a660158aa9b Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:38 +0300
Subject: [PATCH 19/25] Update
 docs/components/progress/examples/ProgressInsideLabelExample.vue

---
 .../components/progress/examples/ProgressInsideLabelExample.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/progress/examples/ProgressInsideLabelExample.vue b/docs/components/progress/examples/ProgressInsideLabelExample.vue
index 799bb81..3b577e2 100644
--- a/docs/components/progress/examples/ProgressInsideLabelExample.vue
+++ b/docs/components/progress/examples/ProgressInsideLabelExample.vue
@@ -2,5 +2,5 @@
   <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
 </template>
 <script setup>
-import { Progress } from '../../../../src/index'
+import { Progress } from 'flowbite-vue'
 </script>
\ No newline at end of file

From 47716a68b917b7a3b61c34153cb5afd742820761 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:44 +0300
Subject: [PATCH 20/25] Update
 docs/components/progress/examples/ProgressOutsideLabelExample.vue

---
 .../progress/examples/ProgressOutsideLabelExample.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/progress/examples/ProgressOutsideLabelExample.vue b/docs/components/progress/examples/ProgressOutsideLabelExample.vue
index 2af7377..7da0a2a 100644
--- a/docs/components/progress/examples/ProgressOutsideLabelExample.vue
+++ b/docs/components/progress/examples/ProgressOutsideLabelExample.vue
@@ -2,5 +2,5 @@
   <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
 </template>
 <script setup>
-import { Progress } from '../../../../src/index'
+import { Progress } from 'flowbite-vue'
 </script>
\ No newline at end of file

From 853925c49d5e6baf86164d89eb8f8c69010f2c9a Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:57:50 +0300
Subject: [PATCH 21/25] Update
 docs/components/progress/examples/ProgressSizeExample.vue

---
 docs/components/progress/examples/ProgressSizeExample.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/progress/examples/ProgressSizeExample.vue b/docs/components/progress/examples/ProgressSizeExample.vue
index 35f9469..f79454c 100644
--- a/docs/components/progress/examples/ProgressSizeExample.vue
+++ b/docs/components/progress/examples/ProgressSizeExample.vue
@@ -7,5 +7,5 @@
   </div>
 </template>
 <script setup>
-import { Progress } from '../../../../src/index'
+import { Progress } from 'flowbite-vue'
 </script>
\ No newline at end of file

From ba378a4679214f062d7c9e6201ad551615ea7de7 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:58:37 +0300
Subject: [PATCH 22/25] Update src/components/Progress/Progress.vue

---
 src/components/Progress/Progress.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 5cdb52a..1936dff 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -48,7 +48,6 @@ const props = defineProps({
   },
 })
 
-const widthStyle = computed(() => "width:" + props.progress + "%")
 
 const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
 

From 0906d9ad132bf2c9b8a39681a7f001b01973f075 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:58:45 +0300
Subject: [PATCH 23/25] Update src/components/Progress/Progress.vue

---
 src/components/Progress/Progress.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 1936dff..2237753 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -48,7 +48,6 @@ const props = defineProps({
   },
 })
 
-
 const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
 
 </script>

From 93988c439ba5ba33313bcad42617efcac083d182 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:58:53 +0300
Subject: [PATCH 24/25] Update
 src/components/Progress/composables/useProgressClasses.ts

---
 src/components/Progress/composables/useProgressClasses.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 0bd8253..f97f30b 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 import classNames from 'classnames'
-import type { ProgressVariant, ProgressSize } from '../types'
+import type { ProgressVariant, ProgressSize, ProgressLabelPosition } from '../types'
 
 const barColorClasses: Record<ProgressVariant, string> = {
   default: 'bg-blue-600 dark:bg-blue-600',

From 7f2c03024c875f50715815083244d34e6f80a41f Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 20 Nov 2022 20:59:23 +0300
Subject: [PATCH 25/25] Update src/components/Progress/types.ts

---
 src/components/Progress/types.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Progress/types.ts b/src/components/Progress/types.ts
index 11b7ebf..ec44e3d 100644
--- a/src/components/Progress/types.ts
+++ b/src/components/Progress/types.ts
@@ -1,2 +1,3 @@
 export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
-export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
\ No newline at end of file
+export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
+export type ProgressLabelPosition = 'inside' | 'outside' | 'none'