@saasmakers/ui 2.0.13 → 2.0.15

package/app/components/fields/FieldAvatar.vue

@@ -87,7 +87,6 @@ function onOpenFilePicker() {
         'rounded-lg border border-gray-200 shadow-sm dark:border-gray-800': border === 'full',
         'border-b border-gray-200 dark:border-gray-800': border === 'bottom',
         'border-0': border === 'none',
-        'text-2xs h-8': size === 'xs',
         'text-xs h-10': size === 'sm',
         'text-sm h-12': size === 'base',
         'text-base h-14': size === 'lg',
@@ -104,14 +103,13 @@ function onOpenFilePicker() {
           v-if="loading"
           class="flex shrink-0 items-center justify-center"
           :class="{
-            'h-7 w-7': size === 'xs',
             'h-8 w-8': size === 'sm',
             'h-9 w-9': size === 'base',
             'h-10 w-10': size === 'lg',
           }"
         >
           <BaseSpinner
-            :size="size === 'xs' ? 'sm' : size === 'sm' ? 'base' : size === 'base' ? 'lg' : 'xl'"
+            :size="size === 'sm' ? 'base' : size === 'base' ? 'lg' : 'xl'"
           />
         </div>
 
@@ -120,7 +118,6 @@ function onOpenFilePicker() {
           :border-width="2"
           class="shrink-0"
           :class="{
-            'h-7 w-7': size === 'xs',
             'h-8 w-8': size === 'sm',
             'h-9 w-9': size === 'base',
             'h-10 w-10': size === 'lg',
@@ -131,7 +128,7 @@ function onOpenFilePicker() {
 
         <BaseText
           class="min-w-0 flex-1 text-gray-900 dark:text-gray-100"
-          :size="({ base: 'sm', lg: 'base', sm: 'xs', xs: '2xs' } as const)[size]"
+          :size="({ base: 'sm', lg: 'base', sm: 'xs' } as const)[size]"
           :text="loading ? t('actionLoading') : (action || t('action'))"
         />
       </div>

package/app/components/fields/FieldCheckbox.vue

@@ -52,7 +52,6 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
             'border-gray-300 dark:border-gray-600': !modelValue,
             'group-hover:border-gray-400 dark:group-hover:border-gray-500': !disabled && !modelValue,
             'group-hover:border-indigo-700 dark:group-hover:border-indigo-300': !disabled && modelValue,
-            'h-3.5 w-3.5': size === 'xs',
             'h-4 w-4': size === 'sm',
             'h-4.5 w-4.5': size === 'base',
             'h-5 w-5': size === 'lg',
@@ -62,9 +61,8 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
           <Icon
             v-if="modelValue"
             :name="getLayerIcon('check')"
-            class="shrink-0 text-indigo-600 dark:text-indigo-400"
+            class="shrink-0 text-gray-900 dark:text-white"
             :class="{
-              'size-2': size === 'xs',
               'size-2.5': size === 'sm',
               'size-3': size === 'base',
               'size-3.5': size === 'lg',

package/app/components/fields/FieldInput.vue

@@ -166,7 +166,6 @@ defineExpose({ focus })
     <div
       class="flex items-center"
       :class="{
-        'h-8': size === 'xs',
         'h-10': size === 'sm',
         'h-12': size === 'base',
         'h-14': size === 'lg',
@@ -200,7 +199,6 @@ defineExpose({ focus })
             'px-10': border === 'bottom' && type !== 'password',
             'border-0 p-0': border === 'none' && type !== 'password',
             'border-0 pr-9': border === 'none' && type === 'password',
-            'text-2xs': size === 'xs',
             'text-xs': size === 'sm',
             'text-sm': size === 'base',
             'text-base': size === 'lg',

package/app/components/fields/FieldLabel.vue

@@ -29,8 +29,6 @@ const textSize = computed<BaseSize>(() => {
       return 'base'
     case 'sm':
       return 'xs'
-    case 'xs':
-      return '2xs'
     default:
       return 'sm'
   }
@@ -71,11 +69,9 @@ function onKeyDown(event: KeyboardEvent) {
       'text-gray-500 dark:text-gray-500 line-through': lineThrough,
       'hover:text-black dark:hover:text-white': isClickable && !lineThrough,
       'w-0 truncate': truncate,
-      'mb-1.5': size === 'xs' && hasMarginBottom,
       'mb-2': size === 'sm' && hasMarginBottom,
       'mb-2.5': size === 'base' && hasMarginBottom,
       'mb-3': size === 'lg' && hasMarginBottom,
-      'ml-1': size === 'xs' && hasMarginLeft,
       'ml-1.5': size === 'sm' && hasMarginLeft,
       'ml-2': size === 'base' && hasMarginLeft,
       'ml-2.5': size === 'lg' && hasMarginLeft,

package/app/components/fields/FieldMessage.vue

@@ -127,8 +127,6 @@ const textSize = computed<BaseSize>(() => {
       return 'sm'
     case 'sm':
       return 'xs'
-    case 'xs':
-      return '2xs'
     default:
       return 'xs'
   }
@@ -141,7 +139,6 @@ const textSize = computed<BaseSize>(() => {
     class="text-left tracking-tighter"
     :class="{
       'field-disabled': disabled,
-      'mt-2': size === 'xs',
       'mt-2.5': size === 'sm',
       'mt-3': size === 'base',
       'mt-3.5': size === 'lg',

package/app/components/fields/FieldSelect.vue

@@ -221,7 +221,6 @@ function selectOption(event: MouseEvent, value: string) {
             'hover:border-gray-300 dark:hover:border-gray-700': !opened && !disabled,
             'focus-visible:border-gray-400 dark:focus-visible:border-gray-600': !disabled,
             'px-3': padding,
-            'text-2xs h-8': size === 'xs',
             'text-xs h-10': size === 'sm',
             'text-sm h-12': size === 'base',
             'text-base h-14': size === 'lg',
@@ -280,11 +279,11 @@ function selectOption(event: MouseEvent, value: string) {
             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-8': size === 'sm' && !padding && direction === 'bottom',
+              'mt-10': ((size === 'sm' && 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-8': size === 'sm' && !padding && direction === 'top',
+              'mb-10': ((size === 'sm' && padding) || (size === 'base' && !padding)) && direction === 'top',
               'mb-12': size === 'base' && padding && direction === 'top',
               'max-h-xs': maxHeight === 'xs',
               'max-h-sm': maxHeight === 'sm',

package/app/components/fields/FieldTabs.vue

@@ -38,7 +38,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
     :class="{
       'field-disabled': disabled,
       'gap-0 border-b border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900': theme === 'border',
-      'gap-2 rounded-lg bg-gray-200 dark:bg-gray-800 p-0.5 sm:p-1': theme === 'rounded',
+      'gap-2 rounded-lg bg-gray-200 dark:bg-gray-800 p-0.5': theme === 'rounded',
     }"
   >
     <component
@@ -51,15 +51,13 @@ function onTabClick(event: MouseEvent, tabValue: string) {
         'flex-col': orientation === 'vertical',
         '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) && !disabled,
-        'py-1 px-2.5 sm:py-1.5': size === 'xs' && theme === 'rounded' && orientation === 'responsive',
-        'py-1.5 px-3 sm:py-2': size === 'sm' && theme === 'rounded' && orientation === 'responsive',
-        'py-2 px-3.5 sm:py-2.5': (size === 'base' && theme === 'rounded' || size === 'xs' && theme === 'border') && orientation === 'responsive',
-        'py-2.5 px-4 sm:py-3': (size === 'lg' && theme === 'rounded' || size === 'sm' && theme === 'border') && orientation === 'responsive',
-        'py-3 px-4.5 sm:py-3.5': size === 'base' && theme === 'border' && orientation === 'responsive',
-        'py-3.5 px-5 sm:py-4': size === 'lg' && theme === 'border' && orientation === 'responsive',
-        'py-1.5 px-2.5': size === 'xs' && theme === 'rounded' && orientation !== 'responsive',
+        'py-1 px-3 sm:py-2': size === 'sm' && theme === 'rounded' && orientation === 'responsive',
+        'py-1.5 px-3.5 sm:py-2.5': size === 'base' && theme === 'rounded' && orientation === 'responsive',
+        'py-2 px-4 sm:py-3': (size === 'lg' && theme === 'rounded' || size === 'sm' && theme === 'border') && orientation === 'responsive',
+        'py-2.5 px-4.5 sm:py-3.5': size === 'base' && theme === 'border' && orientation === 'responsive',
+        'py-3 px-5 sm:py-4': size === 'lg' && theme === 'border' && orientation === 'responsive',
         'py-2 px-3': size === 'sm' && theme === 'rounded' && orientation !== 'responsive',
-        'py-2.5 px-3.5': (size === 'base' && theme === 'rounded' || size === 'xs' && theme === 'border') && orientation !== 'responsive',
+        'py-2.5 px-3.5': size === 'base' && theme === 'rounded' && orientation !== 'responsive',
         'py-3 px-4': (size === 'lg' && theme === 'rounded' || size === 'sm' && theme === 'border') && orientation !== 'responsive',
         'py-3.5 px-4.5': size === 'base' && theme === 'border' && orientation !== 'responsive',
         'py-4 px-5': size === 'lg' && theme === 'border' && orientation !== 'responsive',

package/app/components/fields/FieldTextarea.vue

@@ -81,7 +81,6 @@ function onFieldClick(event: MouseEvent) {
         'border shadow-sm border-gray-200 dark:border-gray-800': border,
         'hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-400 dark:focus:border-gray-600': border && !disabled,
         'border-0': !border,
-        'text-2xs': size === 'xs',
         'text-xs': size === 'sm',
         'text-sm': size === 'base',
         'text-base': size === 'lg',

package/app/components/fields/FieldTime.vue

@@ -61,7 +61,6 @@ function onFieldBlur(event: FocusEvent) {
         'focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700': !disabled,
         'bg-gray-100 dark:bg-gray-900': background === 'gray',
         'bg-white dark:bg-gray-900': background === 'white',
-        'text-2xs h-8': size === 'xs',
         'text-xs h-10': size === 'sm',
         'text-sm h-12': size === 'base',
         'text-base h-14': size === 'lg',

package/app/types/fields.d.ts

@@ -155,7 +155,7 @@ export interface FieldSelectOption {
   value: string
 }
 
-export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
+export type FieldSize = 'base' | 'lg' | 'sm'
 
 export type FieldStatus
   = | 'default'

package/package.json

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