@saasmakers/ui 2.0.14 → 2.0.16

package/app/components/bases/BaseButton.vue

@@ -15,7 +15,6 @@ const props = withDefaults(defineProps<BaseButton>(), {
   light: false,
   loading: false,
   reverse: false,
-  rounded: 'md',
   size: 'base',
   text: '',
   to: undefined,
@@ -64,12 +63,8 @@ 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,
+      'rounded-lg': !circular,
+      '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,
@@ -79,21 +74,21 @@ function onClick(event: MouseEvent) {
       '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,
-      'border-gray-700 dark:border-gray-300 bg-gray-700 dark:bg-gray-300 text-white dark:text-black': color === 'gray' && !light,
-      'hover:bg-gray-800 dark:hover:bg-gray-200': color === 'gray' && !light && !disabled && !loading,
-      'border-gray-700 dark:border-gray-300 text-gray-700 dark:text-gray-300': color === 'gray' && light,
-      'border-green-700 dark:border-green-300 bg-green-700 dark:bg-green-300 text-white dark:text-black': color === 'green' && !light,
-      'hover:bg-green-800 dark:hover:bg-green-200': color === 'green' && !light && !disabled && !loading,
-      'border-green-700 dark:border-green-300 text-green-700 dark:text-green-300': color === 'green' && light,
-      'border-indigo-700 dark:border-indigo-300 bg-indigo-700 dark:bg-indigo-300 text-white dark:text-black': color === 'indigo' && !light,
-      'hover:bg-indigo-800 dark:hover:bg-indigo-200': color === 'indigo' && !light && !disabled && !loading,
-      'border-indigo-700 dark:border-indigo-300 text-indigo-700 dark:text-indigo-300': color === 'indigo' && light,
-      'border-orange-700 dark:border-orange-300 bg-orange-700 dark:bg-orange-300 text-white dark:text-black': color === 'orange' && !light,
-      'hover:bg-orange-800 dark:hover:bg-orange-200': color === 'orange' && !light && !disabled && !loading,
-      'border-orange-700 dark:border-orange-300 text-orange-700 dark:text-orange-300': color === 'orange' && light,
-      'border-red-700 dark:border-red-300 bg-red-700 dark:bg-red-300 text-white dark:text-black': color === 'red' && !light,
-      'hover:bg-red-800 dark:hover:bg-red-200': color === 'red' && !light && !disabled && !loading,
-      'border-red-700 dark:border-red-300 text-red-700 dark:text-red-300': color === 'red' && light,
+      'border-gray-800 dark:border-gray-200 bg-gray-800 dark:bg-gray-200 text-white dark:text-black': color === 'gray' && !light,
+      'hover:bg-gray-900 dark:hover:bg-gray-100': color === 'gray' && !light && !disabled && !loading,
+      'border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200': color === 'gray' && light,
+      'border-green-800 dark:border-green-200 bg-green-800 dark:bg-green-200 text-white dark:text-black': color === 'green' && !light,
+      'hover:bg-green-900 dark:hover:bg-green-100': color === 'green' && !light && !disabled && !loading,
+      'border-green-800 dark:border-green-200 text-green-800 dark:text-green-200': color === 'green' && light,
+      'border-indigo-800 dark:border-indigo-200 bg-indigo-800 dark:bg-indigo-200 text-white dark:text-black': color === 'indigo' && !light,
+      'hover:bg-indigo-900 dark:hover:bg-indigo-100': color === 'indigo' && !light && !disabled && !loading,
+      'border-indigo-800 dark:border-indigo-200 text-indigo-800 dark:text-indigo-200': color === 'indigo' && light,
+      'border-orange-800 dark:border-orange-200 bg-orange-800 dark:bg-orange-200 text-white dark:text-black': color === 'orange' && !light,
+      'hover:bg-orange-900 dark:hover:bg-orange-100': color === 'orange' && !light && !disabled && !loading,
+      'border-orange-800 dark:border-orange-200 text-orange-800 dark:text-orange-200': color === 'orange' && light,
+      'border-red-800 dark:border-red-200 bg-red-800 dark:bg-red-200 text-white dark:text-black': color === 'red' && !light,
+      'hover:bg-red-900 dark:hover:bg-red-100': color === 'red' && !light && !disabled && !loading,
+      'border-red-800 dark:border-red-200 text-red-800 dark:text-red-200': color === 'red' && light,
       'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100': color === 'white' && !light,
       'hover:bg-white dark:hover:bg-gray-900': color === 'white' && !light && !disabled && !loading,
       'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && light,

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',
@@ -64,7 +63,6 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
             :name="getLayerIcon('check')"
             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

@@ -46,10 +46,8 @@ 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 && isDesktopBrowser.value) {
+  if (props.autofocus && input.value) {
     input.value.focus()
   }
 })
@@ -166,7 +164,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 +197,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

@@ -30,10 +30,8 @@ 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 && isDesktopBrowser.value) {
+  if (props.autofocus && textarea.value) {
     textarea.value.focus()
   }
 })
@@ -81,7 +79,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/bases.d.ts

@@ -60,22 +60,12 @@ export interface BaseButton {
   light?: boolean
   loading?: boolean
   reverse?: boolean
-  rounded?: BaseButtonRounded
   size?: BaseButtonSize
   text?: BaseTextText
   to?: RouteLocationNamedI18n
   type?: BaseButtonType
 }
 
-export type BaseButtonRounded
-  = | 'base'
-    | 'full'
-    | 'lg'
-    | 'md'
-    | 'none'
-    | 'sm'
-    | 'xl'
-
 export type BaseButtonSize
   = | '2xs'
     | 'base'

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/app/types/global.d.ts

@@ -24,7 +24,6 @@ declare global {
   type BaseBordered = import('./bases').BaseBordered
   type BaseBorderedColor = import('./bases').BaseBorderedColor
   type BaseButton = import('./bases').BaseButton
-  type BaseButtonRounded = import('./bases').BaseButtonRounded
   type BaseButtonSize = import('./bases').BaseButtonSize
   type BaseButtonType = import('./bases').BaseButtonType
   type BaseCard = import('./bases').BaseCard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "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/apps-helpers": "0.1.0",
-    "@saasmakers/shared": "0.2.8"
+    "@saasmakers/shared": "0.2.8",
+    "@saasmakers/apps-helpers": "0.1.0"
   },
   "peerDependencies": {
     "@saasmakers/apps-helpers": "^0.1.0",