@saasmakers/ui 2.0.63 → 2.0.64

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

@@ -6,6 +6,7 @@ const props = withDefaults(defineProps<BaseRing>(), {
   completed: 0,
   dashed: false,
   format: 'count',
+  revealLabelOnHover: false,
   size: 'base',
   total: 0,
   transitionColors: false,
@@ -18,7 +19,7 @@ const emit = defineEmits<{
 const sizes = {
   base: {
     inset: 1,
-    size: 28,
+    size: 30,
     strokeWidth: 3,
   },
   lg: {
@@ -26,6 +27,11 @@ const sizes = {
     size: 36,
     strokeWidth: 4,
   },
+  sm: {
+    inset: 1,
+    size: 24,
+    strokeWidth: 2.5,
+  },
 } as const
 
 const geometry = computed(() => {
@@ -66,28 +72,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) {
@@ -164,7 +148,7 @@ function onClick(event: MouseEvent) {
 <template>
   <component
     :is="clickable ? 'button' : 'div'"
-    class="inline-flex"
+    class="group inline-flex"
     :aria-expanded="expanded"
     :aria-label="label"
     :class="{ 'cursor-pointer': clickable }"
@@ -183,14 +167,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"
@@ -202,8 +189,10 @@ function onClick(event: MouseEvent) {
         v-if="centerLabel"
         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',
+          'opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100': revealLabelOnHover && !expanded,
+          'opacity-100': !revealLabelOnHover || expanded,
         }"
         dominant-baseline="central"
         text-anchor="middle"

package/app/types/bases.d.ts

@@ -74,7 +74,6 @@ export type BaseButtonSize
   = | 'base'
     | 'lg'
     | 'sm'
-    | 'xs'
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'
 
@@ -304,6 +303,7 @@ export interface BaseRing {
   expanded?: boolean
   format?: BaseRingFormat
   label?: string
+  revealLabelOnHover?: boolean
   size?: BaseRingSize
   total?: number
   transitionColors?: boolean
@@ -317,7 +317,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.64",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",