@saasmakers/ui 2.0.16 → 2.0.18

package/app/components/bases/BaseIcon.vue

@@ -111,7 +111,8 @@ function onKeyDown(event: KeyboardEvent) {
   <div
     class="flex items-center"
     :class="{
-      'cursor-pointer hover:underline hover:text-gray-900 dark:hover:text-gray-100': isClickable,
+      'group cursor-pointer hover:underline hover:text-black dark:hover:text-white': isClickable && text,
+      'group cursor-pointer': isClickable && !text,
       'flex-row': !reverse,
       'flex-row-reverse': reverse,
     }"
@@ -126,6 +127,7 @@ function onKeyDown(event: KeyboardEvent) {
       v-if="finalIcon && !loading"
       class="flex items-center justify-center"
       :class="{
+        'transition-colors duration-200': isClickable,
         'text-2xl': shouldSizeIcon && size === '2xl',
         'text-2xs': shouldSizeIcon && size === '2xs',
         'text-3xl': shouldSizeIcon && size === '3xl',
@@ -143,6 +145,8 @@ function onKeyDown(event: KeyboardEvent) {
         'text-indigo-600 dark:text-indigo-400': finalColor === 'indigo',
         'text-orange-600 dark:text-orange-400': finalColor === 'orange',
         'text-red-600 dark:text-red-400': finalColor === 'red',
+        'group-hover:text-black dark:group-hover:text-white': isClickable && finalColor && finalColor !== 'white',
+        'group-hover:text-gray-800 dark:group-hover:text-gray-200': isClickable && finalColor === 'white',
       }"
       :to="to"
     >

package/app/components/bases/BaseTag.vue

@@ -125,8 +125,9 @@ function onRemove(event: MouseEvent) {
         'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200': color === 'white' && light && !active,
         'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && (!light || active),
         'border-dashed border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200': color === 'white' && light && !active,
-        'py-1.5 px-2.5 text-2xs': size === 'sm',
-        'py-2 px-3 text-xs': size === 'base',
+        'py-0.5 px-1.5': size === 'xs',
+        'py-1.5 px-2.5': size === 'sm',
+        'py-2 px-3': size === 'base',
       }"
       :to="to"
     >
@@ -142,7 +143,7 @@ function onRemove(event: MouseEvent) {
         v-if="avatar || circle || icon"
         class="mr-1 flex items-center text-center"
         :class="{
-          'h-2.5 w-2.5': size === 'sm' || iconSize === 2.5,
+          'h-2.5 w-2.5': size === 'xs' || size === 'sm' || iconSize === 2.5,
           'h-3 w-3': size === 'base' || iconSize === 3,
           'h-3.5 w-3.5': iconSize === 3.5,
           'h-4 w-4': iconSize === 4,
@@ -173,6 +174,7 @@ function onRemove(event: MouseEvent) {
         v-if="!editable"
         class="whitespace-nowrap outline-none"
         :class="{ truncate }"
+        :size="size === 'xs' ? '3xs' : size === 'sm' ? '2xs' : 'xs'"
         :text="text"
       />
 

package/app/components/fields/FieldInput.vue

@@ -46,8 +46,10 @@ const id = useId()
 const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
 const input = ref<HTMLInputElement>()
 const showPassword = ref(false)
+const { isDesktopBrowser } = useDevice()
+
 onMounted(() => {
-  if (props.autofocus && input.value) {
+  if (props.autofocus && input.value && isDesktopBrowser.value) {
     input.value.focus()
   }
 })
@@ -136,7 +138,7 @@ function onTogglePasswordVisibility() {
   showPassword.value = !showPassword.value
 }
 
-defineExpose({ focus })
+defineExpose({ blur, focus })
 </script>
 
 <template>

package/app/components/fields/FieldTextarea.vue

@@ -30,8 +30,10 @@ const emit = defineEmits<{
 const id = useId()
 const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
 const textarea = ref<HTMLTextAreaElement>()
+const { isDesktopBrowser } = useDevice()
+
 onMounted(() => {
-  if (props.autofocus && textarea.value) {
+  if (props.autofocus && textarea.value && isDesktopBrowser.value) {
     textarea.value.focus()
   }
 })

package/app/types/bases.d.ts

@@ -386,7 +386,7 @@ export interface BaseTags {
   wrap?: boolean
 }
 
-export type BaseTagSize = 'base' | 'sm'
+export type BaseTagSize = 'base' | 'sm' | 'xs'
 
 export interface BaseText {
   alignment?: BaseAlignment

package/app/utils/animations.ts

@@ -29,3 +29,11 @@ export const fadeInUp = {
     y: 25,
   },
 }
+
+export const fadeOut = {
+  animate: {
+    opacity: 0,
+    transition: { duration: 0.25 },
+  },
+  initial: { opacity: 1 },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -60,8 +60,8 @@
   "devDependencies": {
     "nuxt": "4.3.1",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.2.8",
-    "@saasmakers/apps-helpers": "0.1.0"
+    "@saasmakers/apps-helpers": "0.1.0",
+    "@saasmakers/shared": "0.2.8"
   },
   "peerDependencies": {
     "@saasmakers/apps-helpers": "^0.1.0",