@saasmakers/ui 2.0.63 → 2.0.65

package/app/components/auth/AuthSocialConnect.vue

@@ -143,7 +143,7 @@ function processGoogleCallback(event: MessageEvent) {
       :alt="t('appleLogo')"
       class="dark:invert"
       :class="{
-        'mr-2 w-4': size === 'xs' || size === 'sm',
+        'mr-2 w-4': size === 'sm',
         'mr-2.5 w-4.5': size === 'base',
         'mr-2.5 w-5': size === 'lg',
       }"
@@ -154,7 +154,7 @@ function processGoogleCallback(event: MessageEvent) {
       v-else-if="provider === 'google'"
       :alt="t('googleLogo')"
       :class="{
-        'mr-2 w-4': size === 'xs' || size === 'sm',
+        'mr-2 w-4': size === 'sm',
         'mr-2.5 w-4.5': size === 'base',
         'mr-2.5 w-5': size === 'lg',
       }"

package/app/components/bases/BaseAlert.vue

@@ -90,7 +90,7 @@ async function onClose(event: MouseEvent) {
         :color="buttonColor"
         :icon="getLayerIcon('closeCircle')"
         light
-        size="xs"
+        size="sm"
         :text="t('closeThisMessage')"
         @click="onClose"
       />

package/app/components/bases/BaseButton.vue

@@ -45,9 +45,6 @@ const contentSize = computed((): BaseSize => {
     case 'sm': {
       return 'xs'
     }
-    case 'xs': {
-      return '2xs'
-    }
     default: {
       return 'sm'
     }
@@ -86,7 +83,6 @@ function onClick(event: MouseEvent) {
       'shadow-sm': !light,
       'rounded-lg': shape !== 'circle',
       'rounded-full': shape === 'circle',
-      'h-8 w-8': size === 'xs' && hasFixedSize && !confirming,
       'h-10 w-10': size === 'sm' && hasFixedSize && !confirming,
       'h-12 w-12': size === 'base' && hasFixedSize && !confirming,
       'h-14 w-14': size === 'lg' && hasFixedSize && !confirming,
@@ -113,7 +109,6 @@ function onClick(event: MouseEvent) {
       'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && light,
       'hover:border-black dark:hover:border-white hover:text-black dark:hover:text-white': color !== 'white' && light && !disabled && !loading,
       'hover:bg-white dark:hover:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-200': color === 'white' && light && !disabled && !loading,
-      'h-8 px-4': size === 'xs' && (!hasFixedSize || confirming),
       'h-10 px-5': size === 'sm' && (!hasFixedSize || confirming),
       'h-12 px-6': size === 'base' && (!hasFixedSize || confirming),
       'h-14 px-6.5': size === 'lg' && (!hasFixedSize || confirming),

package/app/components/bases/BaseRing.vue

@@ -18,7 +18,7 @@ const emit = defineEmits<{
 const sizes = {
   base: {
     inset: 1,
-    size: 28,
+    size: 30,
     strokeWidth: 3,
   },
   lg: {
@@ -26,6 +26,11 @@ const sizes = {
     size: 36,
     strokeWidth: 4,
   },
+  sm: {
+    inset: 1,
+    size: 24,
+    strokeWidth: 2.5,
+  },
 } as const
 
 const geometry = computed(() => {
@@ -66,28 +71,6 @@ const centerLabel = computed(() => {
   return String(clampedCompleted.value)
 })
 
-const progressColor = computed(() => {
-  const progressPercentage = percentage.value
-
-  if (progressPercentage === 100) {
-    return 'var(--indigo-800)'
-  }
-
-  if (progressPercentage >= 75) {
-    return 'var(--indigo-700)'
-  }
-
-  if (progressPercentage >= 50) {
-    return 'var(--indigo-500)'
-  }
-
-  if (progressPercentage >= 25) {
-    return 'var(--indigo-400)'
-  }
-
-  return 'var(--indigo-300)'
-})
-
 // Visual gap (in viewBox units) between segments, widened for fewer steps.
 function gapForTotal(total: number) {
   if (total <= 4) {
@@ -122,9 +105,9 @@ const ringArcs = computed(() => {
     return arcs
   }
 
-  // Beyond 8 steps individual segments become too thin, so we collapse them
+  // Beyond 20 steps individual segments become too thin, so we collapse them
   // into a single continuous progress arc.
-  if (total > 8) {
+  if (total > 20) {
     const progressLength = (circumference * completed) / total
 
     arcs.push(
@@ -183,14 +166,17 @@ function onClick(event: MouseEvent) {
         v-for="(arc, index) in ringArcs"
         :key="index"
         :class="{
-          'stroke-gray-300 dark:stroke-gray-700': !arc.filled,
+          'stroke-gray-200 dark:stroke-gray-800': !arc.filled,
+          'stroke-indigo-400 dark:stroke-indigo-600': arc.filled && percentage < 25,
+          'stroke-indigo-500 dark:stroke-indigo-500': arc.filled && percentage >= 25 && percentage < 50,
+          'stroke-indigo-600 dark:stroke-indigo-400': arc.filled && percentage >= 50 && percentage < 75,
+          'stroke-indigo-700 dark:stroke-indigo-300': arc.filled && percentage >= 75,
           'transition-[stroke] duration-150 motion-reduce:transition-none': transitionColors,
         }"
         :cx="geometry.center"
         :cy="geometry.center"
         fill="none"
         :r="geometry.radius"
-        :stroke="arc.filled ? progressColor : undefined"
         :stroke-dasharray="arc.dashArray"
         :stroke-dashoffset="arc.dashOffset"
         stroke-linecap="butt"
@@ -199,10 +185,10 @@ function onClick(event: MouseEvent) {
       />
 
       <text
-        v-if="centerLabel"
+        v-if="centerLabel && expanded !== false"
         class="fill-gray-600 font-bold tabular-nums dark:fill-gray-400"
         :class="{
-          'text-2xs': size === 'base',
+          'text-2xs': size === 'base' || size === 'sm',
           'text-3xs': size === 'lg',
         }"
         dominant-baseline="central"

package/app/types/bases.d.ts

@@ -74,7 +74,6 @@ export type BaseButtonSize
   = | 'base'
     | 'lg'
     | 'sm'
-    | 'xs'
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'
 
@@ -317,7 +316,7 @@ export interface BaseRingArc {
 
 export type BaseRingFormat = 'count' | 'none' | 'percent'
 
-export type BaseRingSize = 'base' | 'lg'
+export type BaseRingSize = 'base' | 'lg' | 'sm'
 
 export interface BaseShortcut {
   active?: boolean

package/package.json

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