@saasmakers/ui 0.1.74 → 0.1.76

package/app/components/bases/BaseAlert.vue

@@ -99,16 +99,16 @@ async function onClose(event: MouseEvent) {
   </div>
 </template>
 
-  <i18n lang="json">
-  {
-    "en": {
-      "closeThisMessage": "Close this message"
-    },
-    "fr": {
-      "closeThisMessage": "Fermer ce message"
-    },
-    "ja": {
-      "closeThisMessage": "このメッセージを閉じる"
-    }
+<i18n lang="json">
+{
+  "en": {
+    "closeThisMessage": "Close this message"
+  },
+  "fr": {
+    "closeThisMessage": "Fermer ce message"
+  },
+  "ja": {
+    "closeThisMessage": "このメッセージを閉じる"
   }
-  </i18n>
+}
+</i18n>

package/app/components/bases/BaseAvatar.vue

@@ -127,16 +127,16 @@ function onLoad() {
   </component>
 </template>
 
-  <i18n lang="json">
-  {
-    "en": {
-      "edit": "Edit"
-    },
-    "fr": {
-      "edit": "Modifier"
-    },
-    "ja": {
-      "edit": "編集"
-    }
+<i18n lang="json">
+{
+  "en": {
+    "edit": "Edit"
+  },
+  "fr": {
+    "edit": "Modifier"
+  },
+  "ja": {
+    "edit": "編集"
   }
-  </i18n>
+}
+</i18n>

package/app/components/bases/BaseBordered.vue

@@ -20,10 +20,8 @@ defineSlots<{
     :class="{
       'rounded-xl border pt-0 sm:pt-0': hasBorder,
       'shadow-sm': shadow,
-
       'bg-gray-100 dark:bg-gray-900': background === 'gray',
       'bg-white dark:bg-gray-900': background === 'white',
-
       'border-black dark:border-white': borderColor === 'black',
       'border-gray-200 dark:border-gray-800': borderColor === 'gray',
     }"

package/app/components/bases/BaseButton.vue

@@ -66,21 +66,18 @@ function onClick(event: MouseEvent) {
       'w-full': fullWidth,
       'bg-transparent shadow-none': light,
       'shadow-sm': !light,
-
       'rounded-none': rounded === 'none' && !circular,
       'rounded-sm': rounded === 'sm' && !circular,
       'rounded': rounded === 'base' && !circular,
       'rounded-md': rounded === 'md' && !circular,
       'rounded-lg': rounded === 'lg' && !circular,
       'rounded-full': rounded === 'full' || circular,
-
       'h-6 w-6': size === '2xs' && circular,
       'h-8 w-8': size === 'xs' && circular && !confirming,
       'h-10 w-10': size === 'sm' && circular && !confirming,
       'h-12 w-12': size === 'base' && circular && !confirming,
       'h-14 w-14': size === 'lg' && circular && !confirming,
       'h-16 w-16': size === 'xl' && circular && !confirming,
-
       'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && !light,
       'hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black': color === 'black' && !light && !disabled && !loading,
       'border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100': color === 'black' && light,
@@ -104,7 +101,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-6 px-3': size === '2xs' && (!circular || confirming),
       'h-8 px-4': size === 'xs' && (!circular || confirming),
       'h-10 px-5': size === 'sm' && (!circular || confirming),

package/app/components/bases/BaseDivider.vue

@@ -16,7 +16,6 @@ withDefaults(defineProps<BaseDivider>(), {
       'border-dashed': borderStyle === 'dashed',
       'border-dotted': borderStyle === 'dotted',
       'border-solid': borderStyle === 'solid',
-
       'my-3': margin === 3,
       'my-4': margin === 4,
       'my-5': margin === 5,
@@ -27,7 +26,6 @@ withDefaults(defineProps<BaseDivider>(), {
       'my-12': margin === 12,
       'my-16': margin === 16,
       'my-20': margin === 20,
-
       'mx-auto max-w-xs': size === 'sm',
       'w-full': size === 'base',
     }"

package/app/components/bases/BaseEmoji.vue

@@ -25,11 +25,9 @@ function onClick(event: MouseEvent) {
     :class="{
       'border border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900 shadow-inner': hasBox,
       'cursor-pointer hover:border-gray-400 dark:hover:border-gray-600': clickable,
-
       'rounded': ['xs'].includes(size) && hasBox,
       'rounded-md': ['sm', 'base'].includes(size) && hasBox,
       'rounded-lg': ['lg', 'xl'].includes(size) && hasBox,
-
       'h-2 w-2': size === '3xs' && hasBox,
       'h-4 w-4': size === '2xs' && hasBox,
       'h-5 w-5': size === 'xs' && hasBox,

package/app/components/bases/BaseHeading.vue

@@ -20,10 +20,8 @@ defineSlots<{
       'justify-start': alignment === 'left',
       'justify-center text-center': alignment === 'center',
       'justify-end': alignment === 'right',
-
       'font-bold': ['xs', 'sm'].includes(size),
       'font-extrabold': ['base', 'lg', 'xl'].includes(size),
-
       'text-xl sm:text-2xl': size === 'sm',
       'text-2xl sm:text-3xl': size === 'base',
       'text-2xl sm:text-4xl': size === 'lg',

package/app/components/bases/BaseIcon.vue

@@ -141,15 +141,15 @@ function onClick(event: MouseEvent) {
 </template>
 
 <i18n lang="json">
-  {
-    "en": {
-      "confirm": "Confirm"
-    },
-    "fr": {
-      "confirm": "Confirmer"
-    },
-    "ja": {
-      "confirm": "確認"
-    }
+{
+  "en": {
+    "confirm": "Confirm"
+  },
+  "fr": {
+    "confirm": "Confirmer"
+  },
+  "ja": {
+    "confirm": "確認"
   }
+}
 </i18n>

package/app/components/bases/BaseOverlay.vue

@@ -66,14 +66,12 @@ function onClose(event: MouseEvent) {
         class="inset-0 bg-gray-900 dark:bg-gray-100"
         :class="{
           'h-0 w-0': !active,
-
           'opacity-0': opacity === 0,
           'opacity-25': opacity === 25,
           'opacity-50': opacity === 50,
           'opacity-75': opacity === 75,
           'opacity-95': opacity === 95,
           'opacity-100': opacity === 100,
-
           'absolute': position === 'absolute',
           'fixed': position === 'fixed',
         }"

package/app/components/bases/BaseParagraph.vue

@@ -18,7 +18,6 @@ defineSlots<{
       'text-center': alignment === 'center',
       'text-left': alignment === 'left',
       'text-right': alignment === 'right',
-
       'text-sm sm:text-base': size === 'sm',
       'text-base sm:text-lg': size === 'base',
       'text-lg sm:text-xl': size === 'lg',

package/app/components/bases/BaseQuote.vue

@@ -82,7 +82,6 @@ function onClose(event: MouseEvent) {
       class="mt-1 self-start flex-initial"
       :class="{
         'hidden sm:block': hideCharacterOnMobile,
-
         'ml-3': finalReverse && size === 'xs',
         'mr-3': !finalReverse && size === 'xs',
         'ml-4': finalReverse && size !== 'xs',
@@ -99,11 +98,9 @@ function onClose(event: MouseEvent) {
           'border bg-gray-100 dark:bg-gray-900 shadow-inner': finalBackground === 'gray-light',
           'border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 shadow-inner': finalBackground === 'gray',
           'bg-white dark:bg-gray-900 shadow': finalBackground === 'white',
-
           'px-4 py-2 text-sm leading-6': size === 'xs',
           'px-4 py-2.5 text-sm leading-6 sm:text-base sm:leading-7': size === 'sm',
           'px-5 py-4 text-base leading-7 sm:text-lg sm:leading-8': size === 'base',
-
           'border': status,
           'text-black dark:text-white': !status,
           'border-red-700 dark:border-red-300 text-red-700 dark:text-red-300': status === 'error',
@@ -158,15 +155,15 @@ function onClose(event: MouseEvent) {
 </template>
 
 <i18n lang="json">
-  {
-    "en": {
-      "close": "Close"
-    },
-    "fr": {
-      "close": "Fermer"
-    },
-    "ja": {
-      "close": "閉じる"
-    }
+{
+  "en": {
+    "close": "Close"
+  },
+  "fr": {
+    "close": "Fermer"
+  },
+  "ja": {
+    "close": "閉じる"
   }
+}
 </i18n>

package/app/components/bases/BaseSpinner.vue

@@ -52,7 +52,6 @@ function onClick(event: MouseEvent) {
         class="base-spinner__wave absolute left-0 top-0 h-full w-full rounded-full opacity-75"
         :class="{
           'base-spinner__wave--delayed': wave === 2,
-
           'bg-gray-900 dark:bg-gray-100': color === 'black' || !color,
           'bg-gray-700 dark:bg-gray-300': color === 'gray',
           'bg-green-700 dark:bg-green-300': color === 'green',

package/app/components/bases/BaseTag.vue

@@ -94,7 +94,6 @@ function onRemove(event: MouseEvent) {
         'rounded-md': !rounded,
         'rounded-full': rounded,
         'uppercase': uppercase,
-
         'border-gray-200 dark:border-gray-800 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200': (color === 'black' && light && !active) || removable,
         'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && (!light || active),
         'border-gray-700 dark:border-gray-300 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300': color === 'gray' && light && !active,
@@ -110,7 +109,6 @@ 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',
       }"

package/app/components/bases/BaseTags.vue

@@ -132,7 +132,6 @@ function onRemoveTag(event: MouseEvent, tagId?: number | string) {
     :class="{
       'flex-wrap': wrap,
       'w-full overflow-x-auto': !wrap,
-
       '-mt-0.75 -ml-0.75': size === 'sm',
       '-mt-1 -ml-1': size === 'base',
     }"
@@ -221,22 +220,22 @@ function onRemoveTag(event: MouseEvent, tagId?: number | string) {
   </div>
 </template>
 
-  <i18n lang="json">
-  {
-    "en": {
-      "cancel": "Cancel",
-      "newTag": "New tag",
-      "showMore": "& {value} other | & {value} others"
-    },
-    "fr": {
-      "cancel": "Annuler",
-      "newTag": "Nouveau tag",
-      "showMore": "& {value} autre | & {value} autres"
-    },
-    "ja": {
-      "cancel": "キャンセル",
-      "newTag": "新しいタグ",
-      "showMore": "& {value} その他 | & {value} その他"
-    }
+<i18n lang="json">
+{
+  "en": {
+    "cancel": "Cancel",
+    "newTag": "New tag",
+    "showMore": "& {value} other | & {value} others"
+  },
+  "fr": {
+    "cancel": "Annuler",
+    "newTag": "Nouveau tag",
+    "showMore": "& {value} autre | & {value} autres"
+  },
+  "ja": {
+    "cancel": "キャンセル",
+    "newTag": "新しいタグ",
+    "showMore": "& {value} その他 | & {value} その他"
   }
-  </i18n>
+}
+</i18n>

package/app/components/bases/BaseText.vue

@@ -84,10 +84,8 @@ function onShowMore() {
       'uppercase': uppercase,
       'whitespace-nowrap': noWrap,
       'underline': underline,
-
       'bg-gray-100 dark:bg-gray-900': background === 'gray',
       'bg-white dark:bg-gray-900': background === 'white',
-
       'ml-0.5': ['3xs'].includes(size) && !reverse && hasMargin,
       'ml-1.5': ['2xs', 'xs', 'sm'].includes(size) && !reverse && hasMargin,
       'ml-2': ['base', 'lg'].includes(size) && !reverse && hasMargin,
@@ -98,7 +96,6 @@ function onShowMore() {
       'mr-2': ['base', 'lg'].includes(size) && reverse && hasMargin,
       'mr-2.5': ['xl', '2xl'].includes(size) && reverse && hasMargin,
       'mr-3': ['3xl', '4xl'].includes(size) && reverse && hasMargin,
-
       'text-3xs': (size === '3xs') && !uppercase,
       'text-2xs': (size === '2xs') || (size === 'xs' && uppercase),
       'text-xs': (size === 'xs' && !uppercase) || (size === 'sm' && uppercase),

package/app/components/fields/FieldCheckbox.vue

@@ -36,7 +36,6 @@ const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
         class="cursor-pointer border border-gray-300 rounded-lg accent-indigo-700 transition-shadow flex-initial dark:border-gray-700 focus:border-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/40 dark:focus:border-gray-500 dark:hover:border-gray-600"
         :class="{
           'disabled:opacity-50 disabled:cursor-not-allowed': disabled,
-
           'h-3.5 w-3.5': size === 'xs',
           'h-4 w-4': size === 'sm',
           'h-4.5 w-4.5': size === 'base',

package/app/components/fields/FieldDays.vue

@@ -74,35 +74,35 @@ function onUpdateDays(event: MouseEvent, day: number) {
 {
   "en": {
     "days": {
-      "monday": "Monday",
-      "tuesday": "Tuesday",
-      "wednesday": "Wednesday",
-      "thursday": "Thursday",
       "friday": "Friday",
+      "monday": "Monday",
       "saturday": "Saturday",
-      "sunday": "Sunday"
+      "sunday": "Sunday",
+      "thursday": "Thursday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday"
     }
   },
   "fr": {
     "days": {
-      "monday": "Lundi",
-      "tuesday": "Mardi",
-      "wednesday": "Mercredi",
-      "thursday": "Jeudi",
       "friday": "Vendredi",
+      "monday": "Lundi",
       "saturday": "Samedi",
-      "sunday": "Dimanche"
+      "sunday": "Dimanche",
+      "thursday": "Jeudi",
+      "tuesday": "Mardi",
+      "wednesday": "Mercredi"
     }
   },
   "ja": {
     "days": {
-      "monday": "月曜日",
-      "tuesday": "火曜日",
-      "wednesday": "水曜日",
-      "thursday": "木曜日",
       "friday": "金曜日",
+      "monday": "月曜日",
       "saturday": "土曜日",
-      "sunday": "日曜日"
+      "sunday": "日曜日",
+      "thursday": "木曜日",
+      "tuesday": "火曜日",
+      "wednesday": "水曜日"
     }
   }
 }

package/app/components/fields/FieldInput.vue

@@ -157,18 +157,14 @@ defineExpose({ focus })
           'text-gray-500 dark:text-gray-500 line-through': lineThrough,
           'font-medium tracking-tight uppercase': uppercase,
           'font-normal': !uppercase,
-
           'text-center': alignment === 'center',
           'text-left': alignment === 'left',
           'text-right': alignment === 'right',
-
           'bg-gray-100 dark:bg-gray-900': background === 'gray',
           'bg-white dark:bg-gray-900': background === 'white',
-
           'border shadow-sm border-gray-200 dark:border-gray-800 px-4 hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full',
           'border-b border-gray-200 dark:border-gray-800 px-10': border === 'bottom',
           'border-0 p-0': border === 'none',
-
           'text-xs': size === 'xs',
           'text-sm': size === 'sm',
           'text-base': size === 'base',

package/app/components/fields/FieldLabel.vue

@@ -35,7 +35,6 @@ function onClick(event: MouseEvent) {
       'text-gray-500 dark:text-gray-500 line-through': lineThrough,
       'hover:text-black dark:hover:text-white': !loading && !disabled && !lineThrough,
       'w-0 truncate': truncate,
-
       'mb-1.5': size === 'xs' && hasMarginBottom,
       'mb-2': size === 'sm' && hasMarginBottom,
       'mb-2.5': size === 'base' && hasMarginBottom,

package/app/components/fields/FieldMessage.vue

@@ -135,7 +135,6 @@ const text = computed<BaseTextText>(() => {
     :class="{
       'text-red-700 dark:text-red-300': status === 'error',
       'text-gray-700 dark:text-gray-300': status === 'default',
-
       'mt-2': size === 'xs',
       'mt-2.5': size === 'sm',
       'mt-3': size === 'base',
@@ -174,8 +173,8 @@ const text = computed<BaseTextText>(() => {
     "decimal": "La valeur naccepte que les nombres décimaux positifs et négatifs",
     "email": "La valeur n'est pas un email valide",
     "integer": "La valeur n'accepte que des entiers positifs et négatifs",
-    "ipAddress": "La valeur n'accepte qu'une adresse IPv4 valide",
     "invalid": "La valeur n'est pas valide",
+    "ipAddress": "La valeur n'accepte qu'une adresse IPv4 valide",
     "macAddress": "La valeur n'accepte qu'une adresse MAC valide",
     "maxLength": "La valeur est trop longue (max: {max})",
     "maxValue": "La valeur maximum acceptée: {max}",

package/app/components/fields/FieldSelect.vue

@@ -168,18 +168,11 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
             'border-gray-400 dark:border-gray-600': opened,
             'hover:border-gray-300 dark:hover:border-gray-700': !opened,
             'focus:border-gray-400 dark:focus:border-gray-600': !disabled,
-
-            'text-2xs': size === 'xs',
-            'text-xs': size === 'sm',
-            'text-sm': size === 'base',
-            'text-base': size === 'lg',
-
             'px-4': padding,
-
-            'h-8': size === 'xs',
-            'h-10': size === 'sm',
-            'h-12': size === 'base',
-            'h-14': size === 'lg',
+            'text-2xs h-8': size === 'xs',
+            'text-xs h-10': size === 'sm',
+            'text-sm h-12': size === 'base',
+            'text-base h-14': size === 'lg',
           }"
           tabindex="0"
           @click="onContainerClick"
@@ -228,14 +221,12 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
             class="options min-w-xs overflow-y-auto border border-gray-400 rounded-lg bg-white text-gray-600 font-medium dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
             :class="{
               'md:min-w-xl p-1 pb-0': computedColumns.length >= 2,
-
               'mt-8': ['xs', 'sm'].includes(size) && !padding && direction === 'bottom',
               'mt-10': ((['xs', 'sm'].includes(size) && padding) || (size === 'base' && !padding)) && direction === 'bottom',
               'mt-12': size === 'base' && padding && direction === 'bottom',
               'mb-8': ['xs', 'sm'].includes(size) && !padding && direction === 'top',
               'mb-10': ((['xs', 'sm'].includes(size) && padding) || (size === 'base' && !padding)) && direction === 'top',
               'mb-12': size === 'base' && padding && direction === 'top',
-
               'max-h-xs': maxHeight === 'xs',
               'max-h-sm': maxHeight === 'sm',
               'max-h-md': maxHeight === 'md',
@@ -259,11 +250,9 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
                 :class="{
                   'border-b border-gray-200 dark:border-gray-800 px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-900 last:border-b-0': computedColumns.length < 2,
                   'px-2 py-1 last:mb-2': computedColumns.length >= 2,
-
                   'font-medium underline': selectedOption && option.value === selectedOption.value,
                   'text-gray-900 dark:text-gray-100': selectedOption && option.value === selectedOption.value,
                   'bg-white dark:bg-gray-900': selectedOption && option.value !== selectedOption.value,
-
                 }"
                 @click="onOptionClick($event, option)"
               >

package/app/components/fields/FieldTabs.vue

@@ -17,6 +17,14 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<FieldTabs['modelValue']>({ default: () => [] })
 
+function isTabActive(tabValue: number | string) {
+  if (props.multiple) {
+    return Array.isArray(modelValue.value) && modelValue.value.includes(tabValue)
+  }
+
+  return modelValue.value === tabValue
+}
+
 function onTabClick(event: MouseEvent, tabValue: number | string) {
   let activeTabs = [tabValue]
 
@@ -61,25 +69,22 @@ function onTabClick(event: MouseEvent, tabValue: number | string) {
       :key="tab.value"
       class="flex cursor-pointer items-center justify-center text-xs"
       :class="{
-        'text-gray-900 dark:text-gray-100': modelValue === tab.value,
-        'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100': modelValue !== tab.value,
-        'flex-1': !minimizeOnMobile || modelValue !== tab.value,
-        'flex-2 sm:flex-1': minimizeOnMobile && modelValue === tab.value,
-
+        'text-gray-900 dark:text-gray-100': isTabActive(tab.value),
+        'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100': !isTabActive(tab.value),
+        'flex-1': !minimizeOnMobile || !isTabActive(tab.value),
+        'flex-2 sm:flex-1': minimizeOnMobile && isTabActive(tab.value),
         'py-1.5 px-2.5': size === 'xs' && theme === 'rounded',
         'py-2 px-3': size === 'sm' && theme === 'rounded',
         'py-2.5 px-3.5': size === 'base' && theme === 'rounded' || size === 'xs' && theme === 'border',
         'py-3 px-4': size === 'lg' && theme === 'rounded' || size === 'sm' && theme === 'border',
         'py-3.5 px-4.5': size === 'base' && theme === 'border',
         'py-4 px-5': size === 'lg' && theme === 'border',
-
         'border-b-2 border-gray-300 dark:border-gray-700 transition duration-500': theme === 'border',
-        'border-gray-900 dark:border-gray-100': modelValue === tab.value && theme === 'border',
-        'border-gray-100 dark:border-gray-900': modelValue !== tab.value && theme === 'border',
-
+        'border-gray-900 dark:border-gray-100': isTabActive(tab.value) && theme === 'border',
+        'border-gray-100 dark:border-gray-900': !isTabActive(tab.value) && theme === 'border',
         'rounded-lg': theme === 'rounded',
-        'bg-white dark:bg-gray-900 shadow': modelValue === tab.value && theme === 'rounded',
-        'bg-gray-200 dark:bg-gray-800': modelValue !== tab.value && theme === 'rounded',
+        'bg-white dark:bg-gray-900 shadow': isTabActive(tab.value) && theme === 'rounded',
+        'bg-gray-200 dark:bg-gray-800': !isTabActive(tab.value) && theme === 'rounded',
       }"
       :to="tab.to"
       @click="onTabClick($event, tab.value)"
@@ -87,13 +92,13 @@ function onTabClick(event: MouseEvent, tabValue: number | string) {
       <BaseIcon
         v-if="tab.icon"
         class="mr-1.5 flex-initial"
-        :color="modelValue === tab.value ? tab.activeColor : 'black'"
+        :color="isTabActive(tab.value) ? tab.activeColor : 'black'"
         :icon="tab.icon"
       />
 
       <span
         class="flex-initial"
-        :class="{ 'hidden sm:inline': minimizeOnMobile && modelValue !== tab.value }"
+        :class="{ 'hidden sm:inline': minimizeOnMobile && !isTabActive(tab.value) }"
       >
         {{ tab.label }}
       </span>

package/app/components/fields/FieldTextarea.vue

@@ -74,13 +74,10 @@ function onFieldClick(event: MouseEvent) {
         'p-2.5': padding,
         'p-0': !padding,
         'resize-none': !resize,
-
         'bg-gray-100 dark:bg-gray-900': background === 'gray',
         'bg-white dark:bg-gray-900': background === 'white',
-
         'border shadow-sm border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-400 dark:focus:border-gray-600': border,
         'border-0': !border,
-
         'text-xs': size === 'xs',
         'text-sm': size === 'sm',
         'text-base': size === 'base',

package/app/types/bases.d.ts

@@ -21,11 +21,7 @@ export type BaseSize
     | 'xl'
     | 'xs'
 
-export type BaseStatus
-  = | 'error'
-    | 'info'
-    | 'success'
-    | 'warning'
+export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
 
 export interface BaseAlert {
   closingId?: string
@@ -68,9 +64,22 @@ export interface BaseButton {
   type?: BaseButtonType
 }
 
-export type BaseButtonRounded = 'base' | 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl'
+export type BaseButtonRounded
+  = | 'base'
+    | 'full'
+    | 'lg'
+    | 'md'
+    | 'none'
+    | 'sm'
+    | 'xl'
 
-export type BaseButtonSize = '2xs' | 'base' | 'lg' | 'sm' | 'xl' | 'xs'
+export type BaseButtonSize
+  = | '2xs'
+    | 'base'
+    | 'lg'
+    | 'sm'
+    | 'xl'
+    | 'xs'
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'
 
@@ -87,7 +96,13 @@ export interface BaseCharacter {
   size?: BaseCharacterSize
 }
 
-export type BaseCharacterCharacter = 'anthony' | 'julien' | 'mathieu' | 'nada' | 'power' | 'yoda'
+export type BaseCharacterCharacter
+  = | 'anthony'
+    | 'julien'
+    | 'mathieu'
+    | 'nada'
+    | 'power'
+    | 'yoda'
 
 export type BaseCharacterSize = 'base' | 'lg' | 'sm' | 'xs'
 
@@ -126,9 +141,20 @@ export interface BaseHeading {
 
 export type BaseHeadingAlignment = 'center' | 'left' | 'right'
 
-export type BaseHeadingSize = 'base' | 'lg' | 'sm' | 'xl' | 'xs'
+export type BaseHeadingSize
+  = | 'base'
+    | 'lg'
+    | 'sm'
+    | 'xl'
+    | 'xs'
 
-export type BaseHeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+export type BaseHeadingTag
+  = | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
 
 export interface BaseIcon {
   bold?: boolean
@@ -178,7 +204,13 @@ export interface BaseOverlay {
   position?: BaseOverlayPosition
 }
 
-export type BaseOverlayOpacity = 0 | 25 | 50 | 75 | 95 | 100
+export type BaseOverlayOpacity
+  = | 0
+    | 25
+    | 50
+    | 75
+    | 95
+    | 100
 
 export type BaseOverlayPosition = 'absolute' | 'fixed'
 

package/app/types/fields.d.ts

@@ -2,7 +2,12 @@ export type FieldBackground = 'gray' | 'white'
 
 export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
 
-export type FieldStatus = 'default' | 'error' | 'info' | 'success' | 'warning'
+export type FieldStatus
+  = | 'default'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning'
 
 export interface FieldCheckbox {
   description?: BaseTextText
@@ -59,7 +64,20 @@ export type FieldInputAlignment = 'center' | 'left' | 'right'
 
 export type FieldInputBorder = 'bottom' | 'full' | 'none'
 
-export type FieldInputType = 'currency' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week'
+export type FieldInputType
+  = | 'currency'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url'
+    | 'week'
 
 export interface FieldLabel {
   disabled?: boolean

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "uno.config.ts"
   ],
   "peerDependencies": {
-    "@saasmakers/shared": "^0.1.0",
+    "@saasmakers/shared": "^0.1.9",
     "nuxt": "4.2.1"
   },
   "dependencies": {
@@ -54,7 +54,7 @@
   "devDependencies": {
     "nuxt": "4.2.1",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.1.4"
+    "@saasmakers/shared": "0.1.9"
   },
   "scripts": {
     "dev": "nuxi dev",