From 7a87f2897875b432445b624464c0fa4c175fbb4a Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 13 Aug 2024 13:34:37 +0530
Subject: [PATCH 1/9] feat: circular progress bar

---
 src/components/CircularProgressBar.vue | 140 +++++++++++++++++++++++++
 src/index.js                           |   1 +
 2 files changed, 141 insertions(+)
 create mode 100644 src/components/CircularProgressBar.vue

diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
new file mode 100644
index 00000000..dff95944
--- /dev/null
+++ b/src/components/CircularProgressBar.vue
@@ -0,0 +1,140 @@
+<template>
+  <div
+    class="progressbar"
+    role="progressbar"
+    :class="{
+      completed: isCompleted,
+      fillOuter: isOuterCircleFilledOnComplete,
+    }"
+  >
+    <div v-if="!isCompleted">
+      <p v-if="!showPercentage">{{ step }}</p>
+      <p v-else>{{ progress.toFixed(0) }}%</p>
+    </div>
+    <div v-else class="check-icon"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  step: {
+    type: Number,
+    required: true,
+  },
+  totalSteps: {
+    type: Number,
+    required: true,
+  },
+  ringSize: {
+    type: Number,
+    default: 42,
+  },
+  ringBarWidth: {
+    type: Number,
+    default: 10,
+  },
+  progressColor: {
+    type: String,
+    default: '#333',
+  },
+  progressRemainingColor: {
+    type: String,
+    default: '#888',
+  },
+  progressCompleteColor: {
+    type: String,
+    default: '#76f7be',
+  },
+  innerTextFontSize: {
+    type: Number,
+    default: 16,
+  },
+  isOuterCircleFilledOnComplete: {
+    type: Boolean,
+    default: false,
+  },
+  showPercentage: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const progress = computed(() => (props.step / props.totalSteps) * 100)
+const isCompleted = computed(() => props.step === props.totalSteps)
+</script>
+
+<style scoped>
+@property --progress-animation {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+.progressbar {
+  --size: v-bind($props.ringSize + 'px');
+  --bar-width: v-bind($props.ringBarWidth + 'px');
+  --color-incomplete: v-bind($props.progressColor);
+  --color-remaining-circle: v-bind($props.progressRemainingColor);
+  --color-complete: v-bind($props.progressCompleteColor);
+  --font-size: v-bind($props.innerTextFontSize + 'px');
+
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+
+  position: relative;
+  font-size: var(--font-size);
+  transition: --progress-animation 500ms linear !important;
+}
+
+.progressbar::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: conic-gradient(
+    var(--color-incomplete) v-bind(progress + '%'),
+    var(--color-remaining-circle) 0%
+  );
+  transition: --progress-animation 500ms linear !important;
+  aspect-ratio: 1;
+  align-self: center;
+}
+
+.progressbar::after {
+  content: '';
+  position: absolute;
+  background: white;
+  border-radius: inherit;
+  z-index: 1;
+  width: calc(100% - var(--bar-width));
+  aspect-ratio: 1 / 1;
+  transition: --progress-animation 500ms linear !important;
+}
+
+.progressbar > div {
+  z-index: 2;
+  position: relative;
+}
+
+.progressbar.completed:not(.fillOuter):after {
+  background: var(--color-complete);
+  transition: --progress-animation 500ms linear !important;
+}
+.progressbar.completed.fillOuter::before {
+  background: var(--color-complete);
+  transition: --progress-animation 500ms linear !important;
+}
+
+.check-icon {
+  width: 15px;
+  height: 15px;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUiIGhlaWdodD0iODUiIHZpZXdCb3g9IjUgMzAgNzUgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNS40MjM3IDUzLjczMjdMNjcuOTc4NyAyMS4xNzc3TDcyLjk4OTUgMjYuMTg0MkwzNS40MTk1IDYzLjc1TDEyLjg4NiA0MS4yMTIyTDE3Ljg5MjUgMzYuMjAxNUwzNS40MjM3IDUzLjczMjdaIiBmaWxsPSIjMWYxYTM4Ii8+Cjwvc3ZnPgo=');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>
diff --git a/src/index.js b/src/index.js
index 7e2a6189..ece7e07f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -61,6 +61,7 @@ export { default as CommandPaletteItem } from './components/CommandPalette/Comma
 export { default as ListFilter } from './components/ListFilter/ListFilter.vue'
 export { default as Calendar } from './components/Calendar/Calendar.vue'
 export { default as NestedPopover } from './components/ListFilter/NestedPopover.vue'
+export { default as CircularProgressBar } from './components/CircularProgressBar.vue'
 
 // directives
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'

From 8455f6ba76b6cdb803508cded352bc141630dc20 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 13 Aug 2024 14:20:43 +0530
Subject: [PATCH 2/9] fix: add story and docs for circular progress bar

---
 src/components/CircularProgressBar.story.md  | 37 ++++++++++
 src/components/CircularProgressBar.story.vue | 45 +++++++++++++
 src/components/CircularProgressBar.vue       | 71 ++++++++------------
 3 files changed, 109 insertions(+), 44 deletions(-)
 create mode 100644 src/components/CircularProgressBar.story.md
 create mode 100644 src/components/CircularProgressBar.story.vue

diff --git a/src/components/CircularProgressBar.story.md b/src/components/CircularProgressBar.story.md
new file mode 100644
index 00000000..6aad1aaa
--- /dev/null
+++ b/src/components/CircularProgressBar.story.md
@@ -0,0 +1,37 @@
+## Props
+
+
+### step
+The current step of the progress bar. 
+It is required.
+
+### totalSteps
+The total number of steps in the progress bar. Default value is 100.
+It is required.
+
+### ringSize
+The size of the ring.
+The type of the value should be a string with a valid CSS unit (e.g. '42px', '2rem', '5em'). Default value is 42px.
+
+### ringBarWidth
+The width of the ring bar in pixels.
+The type of the value should be a string with a valid CSS unit (e.g. '10px', '0.5rem', '1em'). Default value is 10px.
+
+### innerTextFontSize
+The font size of the inner text.
+The type of the value should be a string with a valid CSS unit (e.g. '16px', '1rem', '2em'). Default value is 16px.
+
+### progressColor
+The color of the how much progress has been made. Default value is #333 (dark grey).
+
+### progressRemainingColor
+The color of the remaining progress. Default value is #888 (light grey).
+
+### progressCompleteColor
+The color of the completed progress. Default value is #76f7be (light green).
+
+### isOuterCircleFilledOnComplete
+If true, the outer circle will be filled with the `progressCompleteColor` when the progress is completed. Else, the inner circle will be filled with the `progressCompleteColor`. Default value is false.
+
+### showPercentage
+If true, the percentage of the progress will be shown in the center of the circle. Else, the absolute value of the current step will be shown. Default value is false.
\ No newline at end of file
diff --git a/src/components/CircularProgressBar.story.vue b/src/components/CircularProgressBar.story.vue
new file mode 100644
index 00000000..5a03c1ed
--- /dev/null
+++ b/src/components/CircularProgressBar.story.vue
@@ -0,0 +1,45 @@
+<template>
+  <Story :layout="{ type: 'grid', width: 500, heigt: 500 }">
+    <Variant title="Default">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar :step="1" :totalSteps="4" />
+      </div>
+    </Variant>
+    <Variant title="Progress Different Color">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="3"
+          :totalSteps="4"
+          progressColor=" #123abc"
+          progressRemainingColor="#75ed6b"
+        />
+      </div>
+    </Variant>
+    <Variant title="Progress Complete Fill Color Inside">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="9"
+          :totalSteps="9"
+          progressCompleteColor="#f7b6f7"
+          :isOuterCircleFilledOnComplete="false"
+        />
+      </div>
+    </Variant>
+    <Variant title="Progress Complete Fill Color Outside">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="9"
+          :totalSteps="9"
+          progressCompleteColor="#f7b6f7"
+          :isOuterCircleFilledOnComplete="true"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup>
+import CircularProgressBar from './CircularProgressBar.vue'
+</script>
+
+<style></style>
diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index dff95944..397184cf 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -18,47 +18,30 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps({
-  step: {
-    type: Number,
-    required: true,
-  },
-  totalSteps: {
-    type: Number,
-    required: true,
-  },
-  ringSize: {
-    type: Number,
-    default: 42,
-  },
-  ringBarWidth: {
-    type: Number,
-    default: 10,
-  },
-  progressColor: {
-    type: String,
-    default: '#333',
-  },
-  progressRemainingColor: {
-    type: String,
-    default: '#888',
-  },
-  progressCompleteColor: {
-    type: String,
-    default: '#76f7be',
-  },
-  innerTextFontSize: {
-    type: Number,
-    default: 16,
-  },
-  isOuterCircleFilledOnComplete: {
-    type: Boolean,
-    default: false,
-  },
-  showPercentage: {
-    type: Boolean,
-    default: false,
-  },
+interface Props {
+  step: number
+  totalSteps: number
+  ringSize: string
+  ringBarWidth: string
+  innerTextFontSize: string
+  progressColor: string
+  progressRemainingColor: string
+  progressCompleteColor: string
+  isOuterCircleFilledOnComplete: boolean
+  showPercentage: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  totalSteps: 4,
+  ringSize: '42px',
+  ringBarWidth: '10px',
+  innerTextFontSize: '16px',
+  progressColor: '#333',
+  progressRemainingColor: '#888',
+  progressCompleteColor: '#76f7be',
+  isOuterCircleFilledOnComplete: false,
+  showPercentage: false,
 })
 
 const progress = computed(() => (props.step / props.totalSteps) * 100)
@@ -72,12 +55,12 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   initial-value: 0%;
 }
 .progressbar {
-  --size: v-bind($props.ringSize + 'px');
-  --bar-width: v-bind($props.ringBarWidth + 'px');
+  --size: v-bind($props.ringSize);
+  --bar-width: v-bind($props.ringBarWidth);
+  --font-size: v-bind($props.innerTextFontSize);
   --color-incomplete: v-bind($props.progressColor);
   --color-remaining-circle: v-bind($props.progressRemainingColor);
   --color-complete: v-bind($props.progressCompleteColor);
-  --font-size: v-bind($props.innerTextFontSize + 'px');
 
   width: var(--size);
   height: var(--size);

From fc95c42e88e8bc92fc5270d60383be26f1502fbc Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 13 Aug 2024 20:52:58 +0530
Subject: [PATCH 3/9] fix: circle animation

---
 src/components/CircularProgressBar.vue | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index 397184cf..ecd152fb 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -49,11 +49,6 @@ const isCompleted = computed(() => props.step === props.totalSteps)
 </script>
 
 <style scoped>
-@property --progress-animation {
-  syntax: '<length-percentage>';
-  inherits: false;
-  initial-value: 0%;
-}
 .progressbar {
   --size: v-bind($props.ringSize);
   --bar-width: v-bind($props.ringBarWidth);
@@ -61,6 +56,7 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   --color-incomplete: v-bind($props.progressColor);
   --color-remaining-circle: v-bind($props.progressRemainingColor);
   --color-complete: v-bind($props.progressCompleteColor);
+  --progress: v-bind(progress + '%');
 
   width: var(--size);
   height: var(--size);
@@ -70,7 +66,11 @@ const isCompleted = computed(() => props.step === props.totalSteps)
 
   position: relative;
   font-size: var(--font-size);
-  transition: --progress-animation 500ms linear !important;
+}
+@property --progress {
+  syntax: '<length-percentage>';
+  inherits: true;
+  initial-value: 80%;
 }
 
 .progressbar::before {
@@ -79,11 +79,11 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   inset: 0;
   border-radius: inherit;
   background: conic-gradient(
-    var(--color-incomplete) v-bind(progress + '%'),
+    var(--color-incomplete) var(--progress),
     var(--color-remaining-circle) 0%
   );
-  transition: --progress-animation 500ms linear !important;
-  aspect-ratio: 1;
+  transition: --progress 500ms linear !important;
+  aspect-ratio: 1 / 1;
   align-self: center;
 }
 
@@ -95,7 +95,6 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   z-index: 1;
   width: calc(100% - var(--bar-width));
   aspect-ratio: 1 / 1;
-  transition: --progress-animation 500ms linear !important;
 }
 
 .progressbar > div {
@@ -105,11 +104,9 @@ const isCompleted = computed(() => props.step === props.totalSteps)
 
 .progressbar.completed:not(.fillOuter):after {
   background: var(--color-complete);
-  transition: --progress-animation 500ms linear !important;
 }
 .progressbar.completed.fillOuter::before {
   background: var(--color-complete);
-  transition: --progress-animation 500ms linear !important;
 }
 
 .check-icon {

From 514baf3f84ed57d62095a1cc64bcf99b7e0b3412 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 13 Aug 2024 22:15:46 +0530
Subject: [PATCH 4/9] chore: styles cleanup

---
 src/components/CircularProgressBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index ecd152fb..4fb5c0f2 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -70,7 +70,7 @@ const isCompleted = computed(() => props.step === props.totalSteps)
 @property --progress {
   syntax: '<length-percentage>';
   inherits: true;
-  initial-value: 80%;
+  initial-value: 0%;
 }
 
 .progressbar::before {
@@ -82,7 +82,7 @@ const isCompleted = computed(() => props.step === props.totalSteps)
     var(--color-incomplete) var(--progress),
     var(--color-remaining-circle) 0%
   );
-  transition: --progress 500ms linear !important;
+  transition: --progress 500ms linear;
   aspect-ratio: 1 / 1;
   align-self: center;
 }
@@ -102,7 +102,7 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   position: relative;
 }
 
-.progressbar.completed:not(.fillOuter):after {
+.progressbar.completed:not(.fillOuter)::after {
   background: var(--color-complete);
 }
 .progressbar.completed.fillOuter::before {

From 2388cf0e28aaf26f585c41bec3fa564facea2d13 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 20 Aug 2024 14:45:12 +0530
Subject: [PATCH 5/9] fix(ts): interface with optional props

---
 src/components/CircularProgressBar.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index 4fb5c0f2..16167a78 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -21,14 +21,14 @@ import { computed } from 'vue'
 interface Props {
   step: number
   totalSteps: number
-  ringSize: string
-  ringBarWidth: string
-  innerTextFontSize: string
-  progressColor: string
-  progressRemainingColor: string
-  progressCompleteColor: string
-  isOuterCircleFilledOnComplete: boolean
-  showPercentage: boolean
+  ringSize?: string
+  ringBarWidth?: string
+  innerTextFontSize?: string
+  progressColor?: string
+  progressRemainingColor?: string
+  progressCompleteColor?: string
+  isOuterCircleFilledOnComplete?: boolean
+  showPercentage?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {

From 0d6c5cf48b93e3d956ab52dd80e68b8b435fd2aa Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Wed, 21 Aug 2024 00:04:14 +0530
Subject: [PATCH 6/9] fix(props): change api of the component

---
 src/components/CircularProgressBar.story.vue |  31 +++--
 src/components/CircularProgressBar.vue       | 118 +++++++++++++++----
 2 files changed, 121 insertions(+), 28 deletions(-)

diff --git a/src/components/CircularProgressBar.story.vue b/src/components/CircularProgressBar.story.vue
index 5a03c1ed..b3164191 100644
--- a/src/components/CircularProgressBar.story.vue
+++ b/src/components/CircularProgressBar.story.vue
@@ -5,13 +5,30 @@
         <CircularProgressBar :step="1" :totalSteps="4" />
       </div>
     </Variant>
-    <Variant title="Progress Different Color">
+    <Variant title="Size">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="1"
+          :totalSteps="4"
+          size="lg"
+          :showPercentage="true"
+        />
+      </div>
+    </Variant>
+    <Variant title="Theme">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar :step="3" :totalSteps="4" theme="orange" />
+      </div>
+    </Variant>
+    <Variant title="Custom Theme">
       <div class="p-2 w-full h-full">
         <CircularProgressBar
           :step="3"
           :totalSteps="4"
-          progressColor=" #123abc"
-          progressRemainingColor="#75ed6b"
+          :theme="{
+            primary: '#2376f5',
+            secondary: '#ddd5d5',
+          }"
         />
       </div>
     </Variant>
@@ -20,8 +37,8 @@
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
-          progressCompleteColor="#f7b6f7"
-          :isOuterCircleFilledOnComplete="false"
+          progressCompleteColor="lightgreen"
+          variant="solid"
         />
       </div>
     </Variant>
@@ -30,8 +47,8 @@
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
-          progressCompleteColor="#f7b6f7"
-          :isOuterCircleFilledOnComplete="true"
+          variant="outline"
+          progressCompleteColor="lightgreen"
         />
       </div>
     </Variant>
diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index 16167a78..72547263 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -4,7 +4,7 @@
     role="progressbar"
     :class="{
       completed: isCompleted,
-      fillOuter: isOuterCircleFilledOnComplete,
+      fillOuter: variant === 'outline',
     }"
   >
     <div v-if="!isCompleted">
@@ -21,40 +21,116 @@ import { computed } from 'vue'
 interface Props {
   step: number
   totalSteps: number
-  ringSize?: string
-  ringBarWidth?: string
-  innerTextFontSize?: string
-  progressColor?: string
-  progressRemainingColor?: string
-  progressCompleteColor?: string
-  isOuterCircleFilledOnComplete?: boolean
   showPercentage?: boolean
+  size?: Size
+  theme?: string | ThemeProps
+  variant?: Variant
+  // allow primary, secondary, etc.
+  progressCompleteColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   step: 1,
   totalSteps: 4,
-  ringSize: '42px',
-  ringBarWidth: '10px',
-  innerTextFontSize: '16px',
-  progressColor: '#333',
-  progressRemainingColor: '#888',
-  progressCompleteColor: '#76f7be',
-  isOuterCircleFilledOnComplete: false,
   showPercentage: false,
+  theme: 'black',
+  size: 'md',
+  progressCompleteColor: '#76f7be',
+  variant: 'solid',
 })
 
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+interface SizeProps {
+  ringSize: string
+  ringBarWidth: string
+  innerTextFontSize: string
+}
+
+// predefined sizes for the circular progress bar
+const sizeMap: Record<Size, SizeProps> = {
+  xs: {
+    ringSize: '30px',
+    ringBarWidth: '6px',
+    innerTextFontSize: props.showPercentage ? '8px' : '12px',
+  },
+  sm: {
+    ringSize: '42px',
+    ringBarWidth: '10px',
+    innerTextFontSize: props.showPercentage ? '12px' : '16px',
+  },
+  md: {
+    ringSize: '60px',
+    ringBarWidth: '14px',
+    innerTextFontSize: props.showPercentage ? '16px' : '20px',
+  },
+  lg: {
+    ringSize: '84px',
+    ringBarWidth: '18px',
+    innerTextFontSize: props.showPercentage ? '20px' : '24px',
+  },
+  xl: {
+    ringSize: '108px',
+    ringBarWidth: '22px',
+    innerTextFontSize: props.showPercentage ? '24px' : '28px',
+  },
+}
+
+const size = computed(() => sizeMap[props.size] || sizeMap['md'])
+
+type Theme = 'black' | 'red' | 'green' | 'blue' | 'purple' | 'pink' | 'orange'
+interface ThemeProps {
+  primary: string
+  secondary: string
+}
+// predefined themes for the circular progress bar
+const themeMap: Record<Theme, ThemeProps> = {
+  black: {
+    primary: '#333',
+    secondary: '#888',
+  },
+  red: {
+    primary: '#FF0000',
+    secondary: '#FFD7D7',
+  },
+  green: {
+    primary: '#22C55E',
+    secondary: '#b1ffda',
+  },
+  blue: {
+    primary: '#2376f5',
+    secondary: '#D7D7FF',
+  },
+  purple: {
+    primary: '#FF00FF',
+    secondary: '#FFD7FF',
+  },
+  pink: {
+    primary: '#FF69B4',
+    secondary: '#FFD1DC',
+  },
+  orange: {
+    primary: '#FFA500',
+    secondary: '#FFE5CC',
+  },
+}
+
+const theme = computed(
+  () => themeMap[props.theme as Theme] || (props.theme as ThemeProps),
+)
+
+type Variant = 'solid' | 'outline'
+
 const progress = computed(() => (props.step / props.totalSteps) * 100)
 const isCompleted = computed(() => props.step === props.totalSteps)
 </script>
 
 <style scoped>
 .progressbar {
-  --size: v-bind($props.ringSize);
-  --bar-width: v-bind($props.ringBarWidth);
-  --font-size: v-bind($props.innerTextFontSize);
-  --color-incomplete: v-bind($props.progressColor);
-  --color-remaining-circle: v-bind($props.progressRemainingColor);
+  --size: v-bind(size.ringSize);
+  --bar-width: v-bind(size.ringBarWidth);
+  --font-size: v-bind(size.innerTextFontSize);
+  --color-progress: v-bind(theme.primary);
+  --color-remaining-circle: v-bind(theme.secondary);
   --color-complete: v-bind($props.progressCompleteColor);
   --progress: v-bind(progress + '%');
 
@@ -79,7 +155,7 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   inset: 0;
   border-radius: inherit;
   background: conic-gradient(
-    var(--color-incomplete) var(--progress),
+    var(--color-progress) var(--progress),
     var(--color-remaining-circle) 0%
   );
   transition: --progress 500ms linear;

From 133a2da7dc319c1fd74336886ac412bcb9adc527 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Wed, 21 Aug 2024 08:16:52 +0530
Subject: [PATCH 7/9] fix: better computation of theme

---
 src/components/CircularProgressBar.vue | 28 ++++++++++----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index 72547263..7f107e5c 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -22,10 +22,9 @@ interface Props {
   step: number
   totalSteps: number
   showPercentage?: boolean
-  size?: Size
-  theme?: string | ThemeProps
   variant?: Variant
-  // allow primary, secondary, etc.
+  theme?: string | ThemeProps
+  size?: Size
   progressCompleteColor?: string
 }
 
@@ -39,6 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'solid',
 })
 
+type Variant = 'solid' | 'outline'
+
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 interface SizeProps {
   ringSize: string
@@ -77,7 +78,7 @@ const sizeMap: Record<Size, SizeProps> = {
 
 const size = computed(() => sizeMap[props.size] || sizeMap['md'])
 
-type Theme = 'black' | 'red' | 'green' | 'blue' | 'purple' | 'pink' | 'orange'
+type Theme = 'black' | 'red' | 'green' | 'blue' | 'orange'
 interface ThemeProps {
   primary: string
   secondary: string
@@ -100,25 +101,18 @@ const themeMap: Record<Theme, ThemeProps> = {
     primary: '#2376f5',
     secondary: '#D7D7FF',
   },
-  purple: {
-    primary: '#FF00FF',
-    secondary: '#FFD7FF',
-  },
-  pink: {
-    primary: '#FF69B4',
-    secondary: '#FFD1DC',
-  },
   orange: {
     primary: '#FFA500',
     secondary: '#FFE5CC',
   },
 }
 
-const theme = computed(
-  () => themeMap[props.theme as Theme] || (props.theme as ThemeProps),
-)
-
-type Variant = 'solid' | 'outline'
+const theme = computed(() => {
+  if (typeof props.theme === 'string') {
+    return themeMap[props.theme as Theme] || themeMap['black']
+  }
+  return props.theme
+})
 
 const progress = computed(() => (props.step / props.totalSteps) * 100)
 const isCompleted = computed(() => props.step === props.totalSteps)

From e50941a549f4d2e07bb486cad70d9a60c8ece579 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Wed, 21 Aug 2024 08:37:27 +0530
Subject: [PATCH 8/9] chore(docs): docs according to new component API

---
 src/components/CircularProgressBar.story.md  | 36 +++++++++-----------
 src/components/CircularProgressBar.story.vue |  2 +-
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/CircularProgressBar.story.md b/src/components/CircularProgressBar.story.md
index 6aad1aaa..7edf8dba 100644
--- a/src/components/CircularProgressBar.story.md
+++ b/src/components/CircularProgressBar.story.md
@@ -9,29 +9,25 @@ It is required.
 The total number of steps in the progress bar. Default value is 100.
 It is required.
 
-### ringSize
-The size of the ring.
-The type of the value should be a string with a valid CSS unit (e.g. '42px', '2rem', '5em'). Default value is 42px.
-
-### ringBarWidth
-The width of the ring bar in pixels.
-The type of the value should be a string with a valid CSS unit (e.g. '10px', '0.5rem', '1em'). Default value is 10px.
+### showPercentage
+If true, the percentage of the progress will be shown in the center of the circle. Else, the absolute value of the current step will be shown. Default value is false.
 
-### innerTextFontSize
-The font size of the inner text.
-The type of the value should be a string with a valid CSS unit (e.g. '16px', '1rem', '2em'). Default value is 16px.
+### size
+The size of the progress bar. Default value is 'md'.
+Available options are 'xs', 'sm', 'md', 'lg', 'xl'.
 
-### progressColor
-The color of the how much progress has been made. Default value is #333 (dark grey).
+### variant
+The variant of the progress bar. Default value is 'solid'. 
+Available options are 'solid', 'outline'.
 
-### progressRemainingColor
-The color of the remaining progress. Default value is #888 (light grey).
+When the variant is 'solid', the progress bar will be filled with the progress color. When the variant is 'outline', the progress bar will be an outline with the progress color.
 
-### progressCompleteColor
-The color of the completed progress. Default value is #76f7be (light green).
+### theme
+The theme of the progress bar. Default value is 'black'.
+Available options are 'black', 'red', 'green', 'blue', 'orange'.
 
-### isOuterCircleFilledOnComplete
-If true, the outer circle will be filled with the `progressCompleteColor` when the progress is completed. Else, the inner circle will be filled with the `progressCompleteColor`. Default value is false.
+If a string is passed, the predefined theme will be used, and if the color does not match any predefined theme, the default theme will be used.
+If a custom theme is needed, an object with primary and secondary colors can be passed.
 
-### showPercentage
-If true, the percentage of the progress will be shown in the center of the circle. Else, the absolute value of the current step will be shown. Default value is false.
\ No newline at end of file
+### progressCompleteColor
+The color of the completed progress. Default value is #76f7be (light green).
\ No newline at end of file
diff --git a/src/components/CircularProgressBar.story.vue b/src/components/CircularProgressBar.story.vue
index b3164191..3822863a 100644
--- a/src/components/CircularProgressBar.story.vue
+++ b/src/components/CircularProgressBar.story.vue
@@ -37,8 +37,8 @@
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
-          progressCompleteColor="lightgreen"
           variant="solid"
+          progressCompleteColor="lightgreen"
         />
       </div>
     </Variant>

From 83a6b518fae218377075d20370b20cd67c25ea5f Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Wed, 21 Aug 2024 21:59:47 +0530
Subject: [PATCH 9/9] fix: change props variable name for completion of
 progress

---
 src/components/CircularProgressBar.story.md  | 16 ++++++++--------
 src/components/CircularProgressBar.story.vue | 12 ++++++------
 src/components/CircularProgressBar.vue       |  8 ++++----
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/CircularProgressBar.story.md b/src/components/CircularProgressBar.story.md
index 7edf8dba..6f2b6cdf 100644
--- a/src/components/CircularProgressBar.story.md
+++ b/src/components/CircularProgressBar.story.md
@@ -16,12 +16,6 @@ If true, the percentage of the progress will be shown in the center of the circl
 The size of the progress bar. Default value is 'md'.
 Available options are 'xs', 'sm', 'md', 'lg', 'xl'.
 
-### variant
-The variant of the progress bar. Default value is 'solid'. 
-Available options are 'solid', 'outline'.
-
-When the variant is 'solid', the progress bar will be filled with the progress color. When the variant is 'outline', the progress bar will be an outline with the progress color.
-
 ### theme
 The theme of the progress bar. Default value is 'black'.
 Available options are 'black', 'red', 'green', 'blue', 'orange'.
@@ -29,5 +23,11 @@ Available options are 'black', 'red', 'green', 'blue', 'orange'.
 If a string is passed, the predefined theme will be used, and if the color does not match any predefined theme, the default theme will be used.
 If a custom theme is needed, an object with primary and secondary colors can be passed.
 
-### progressCompleteColor
-The color of the completed progress. Default value is #76f7be (light green).
\ No newline at end of file
+### themeComplete
+The color of the completed progress. Default value is #76f7be (light green).
+
+### variant
+The variant of the progress bar. Default value is 'solid'. 
+Available options are 'solid', 'outline'.
+
+When the variant is 'solid', the progress bar on complete will be filled with the progress color. When the variant is 'outline', the progress bar on complete will be an outline with the progress color.
\ No newline at end of file
diff --git a/src/components/CircularProgressBar.story.vue b/src/components/CircularProgressBar.story.vue
index 3822863a..66390b13 100644
--- a/src/components/CircularProgressBar.story.vue
+++ b/src/components/CircularProgressBar.story.vue
@@ -23,8 +23,8 @@
     <Variant title="Custom Theme">
       <div class="p-2 w-full h-full">
         <CircularProgressBar
-          :step="3"
-          :totalSteps="4"
+          :step="2"
+          :totalSteps="6"
           :theme="{
             primary: '#2376f5',
             secondary: '#ddd5d5',
@@ -32,23 +32,23 @@
         />
       </div>
     </Variant>
-    <Variant title="Progress Complete Fill Color Inside">
+    <Variant title="Solid Variant">
       <div class="p-2 w-full h-full">
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
           variant="solid"
-          progressCompleteColor="lightgreen"
+          themeComplete="lightgreen"
         />
       </div>
     </Variant>
-    <Variant title="Progress Complete Fill Color Outside">
+    <Variant title="Outline Variant">
       <div class="p-2 w-full h-full">
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
           variant="outline"
-          progressCompleteColor="lightgreen"
+          themeComplete="lightgreen"
         />
       </div>
     </Variant>
diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index 7f107e5c..8560da91 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -11,7 +11,7 @@
       <p v-if="!showPercentage">{{ step }}</p>
       <p v-else>{{ progress.toFixed(0) }}%</p>
     </div>
-    <div v-else class="check-icon"></div>
+    <div v-else class="check-icon" />
   </div>
 </template>
 
@@ -25,7 +25,7 @@ interface Props {
   variant?: Variant
   theme?: string | ThemeProps
   size?: Size
-  progressCompleteColor?: string
+  themeComplete?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
   showPercentage: false,
   theme: 'black',
   size: 'md',
-  progressCompleteColor: '#76f7be',
+  themeComplete: 'lightgreen',
   variant: 'solid',
 })
 
@@ -125,7 +125,7 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   --font-size: v-bind(size.innerTextFontSize);
   --color-progress: v-bind(theme.primary);
   --color-remaining-circle: v-bind(theme.secondary);
-  --color-complete: v-bind($props.progressCompleteColor);
+  --color-complete: v-bind($props.themeComplete);
   --progress: v-bind(progress + '%');
 
   width: var(--size);