@saasmakers/ui 1.5.2 → 1.5.3

package/app/components/bases/BaseProgress.vue

@@ -4,6 +4,7 @@ import type { BaseProgress } from '../../types/bases'
 const props = withDefaults(defineProps<BaseProgress>(), {
   max: 100,
   showLabel: false,
+  size: 'base',
   value: 0,
 })
 
@@ -20,15 +21,19 @@ const label = computed(() => {
     return `${Math.round(percent.value)} %`
   }
 
-  return `${props.value}/${props.max}`
+  return `${props.value} / ${props.max}`
 })
 </script>
 
 <template>
-  <div class="w-full flex items-center gap-2">
+  <div
+    class="flex items-center"
+    :class="size === 'base' ? 'gap-2.5' : 'gap-2'"
+  >
     <div
       role="progressbar"
-      class="h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
+      class="min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
+      :class="size === 'base' ? 'h-1.5' : 'h-1'"
       :aria-label="label"
       :aria-valuemax="max"
       :aria-valuemin="0"
@@ -43,7 +48,7 @@ const label = computed(() => {
     <BaseText
       v-if="showLabel"
       class="shrink-0 text-indigo-700 dark:text-indigo-300"
-      size="2xs"
+      :size="size === 'base' ? 'xs' : '2xs'"
       :text="label"
     />
   </div>

package/app/types/bases.d.ts

@@ -284,9 +284,12 @@ export type BasePowerSize = 'base' | 'lg' | 'sm' | 'xs'
 export interface BaseProgress {
   max?: number
   showLabel?: boolean
+  size?: BaseProgressSize
   value?: number
 }
 
+export type BaseProgressSize = 'base' | 'sm'
+
 export interface BaseQuote {
   background?: BaseQuoteBackground
   character?: BaseCharacterCharacter

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",