@saasmakers/ui 2.0.75 → 2.0.77

package/app/components/bases/BaseButton.vue

@@ -83,9 +83,9 @@ function onClick(event: MouseEvent) {
       'shadow-sm': !light || color === 'gray',
       'rounded-lg': shape !== 'circle',
       'rounded-full': shape === 'circle',
-      'h-10 w-10': size === 'sm' && hasFixedSize && !confirming,
-      'h-12 w-12': size === 'base' && hasFixedSize && !confirming,
-      'h-14 w-14': size === 'lg' && hasFixedSize && !confirming,
+      'size-sm': size === 'sm' && hasFixedSize && !confirming,
+      'size-base': size === 'base' && hasFixedSize && !confirming,
+      'size-lg': size === 'lg' && hasFixedSize && !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,
@@ -110,9 +110,9 @@ 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 !== 'gray' && 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-10 px-5': size === 'sm' && (!hasFixedSize || confirming),
-      'h-12 px-6': size === 'base' && (!hasFixedSize || confirming),
-      'h-14 px-6.5': size === 'lg' && (!hasFixedSize || confirming),
+      'h-sm px-sm': size === 'sm' && (!hasFixedSize || confirming),
+      'h-base px-base': size === 'base' && (!hasFixedSize || confirming),
+      'h-lg px-lg': size === 'lg' && (!hasFixedSize || confirming),
     }"
     :disabled="disabled"
     :to="to"

package/app/components/fields/FieldAvatar.vue

@@ -75,7 +75,7 @@ function onOpenFilePicker() {
 
     <div
       :aria-label="loading ? t('actionLoading') : (typeof action === 'string' ? action : (action?.base || t('action')))"
-      class="w-full flex items-center gap-2 px-3 uppercase outline-none"
+      class="w-full flex items-center gap-2 uppercase outline-none"
       :class="{
         'cursor-pointer': !disabled && !loading,
         'field-disabled': disabled,
@@ -87,9 +87,9 @@ function onOpenFilePicker() {
         'base-box': border === 'full',
         'base-border-b': border === 'bottom',
         'border-0': border === 'none',
-        'text-xs h-10': size === 'sm',
-        'text-sm h-12': size === 'base',
-        'text-base h-14': size === 'lg',
+        'text-xs h-sm px-sm': size === 'sm',
+        'text-sm h-base px-base': size === 'base',
+        'text-base h-lg px-lg': size === 'lg',
       }"
       role="button"
       :aria-disabled="disabled || loading"

package/app/components/fields/FieldCombobox.vue

@@ -205,9 +205,9 @@ function readField(item: Item, field: string) {
       <div
         class="flex flex-wrap select-none items-center gap-1.5 p-1.5"
         :class="{
-          'min-h-10': size === 'sm',
-          'min-h-12': size === 'base',
-          'min-h-14': size === 'lg',
+          'min-h-sm': size === 'sm',
+          'min-h-base': size === 'base',
+          'min-h-lg': size === 'lg',
         }"
       >
         <BaseChip

package/app/components/fields/FieldDate.vue

@@ -418,11 +418,15 @@ function syncFocusedDayIndex() {
         :id="id"
         class="flex cursor-pointer items-center gap-2 outline-none"
         :class="{
-          'h-10': size === 'sm',
-          'h-12': size === 'base',
-          'h-14': size === 'lg',
-          'pl-3 pr-0': modelValue,
-          'px-3': !modelValue,
+          'h-sm': size === 'sm',
+          'h-base': size === 'base',
+          'h-lg': size === 'lg',
+          'pl-3 pr-0': modelValue && size === 'sm',
+          'pl-4 pr-0': modelValue && size === 'base',
+          'pl-5 pr-0': modelValue && size === 'lg',
+          'px-sm': !modelValue && size === 'sm',
+          'px-base': !modelValue && size === 'base',
+          'px-lg': !modelValue && size === 'lg',
         }"
         role="button"
         :aria-disabled="disabled"

package/app/components/fields/FieldInput.vue

@@ -181,9 +181,9 @@ defineExpose({
     <div
       class="flex items-center"
       :class="{
-        'h-10': size === 'sm',
-        'h-12': size === 'base',
-        'h-14': size === 'lg',
+        'h-sm': size === 'sm',
+        'h-base': size === 'base',
+        'h-lg': size === 'lg',
       }"
     >
       <slot name="inputLeft" />
@@ -207,8 +207,12 @@ defineExpose({
             'bg-gray-100 dark:bg-gray-900': background === 'gray',
             'bg-white dark:bg-gray-900': background === 'white',
             'base-box': border === 'full',
-            'pl-3 pr-10': border === 'full' && type === 'password',
-            'px-3': border === 'full' && type !== 'password',
+            'pl-3 pr-10': border === 'full' && type === 'password' && size === 'sm',
+            'pl-4 pr-10': border === 'full' && type === 'password' && size === 'base',
+            'pl-5 pr-10': border === 'full' && type === 'password' && size === 'lg',
+            'px-sm': border === 'full' && type !== 'password' && size === 'sm',
+            'px-base': border === 'full' && type !== 'password' && size === 'base',
+            'px-lg': border === 'full' && type !== 'password' && size === 'lg',
             'base-border-interactive': border === 'full' && !disabled,
             'base-border-b': border === 'bottom',
             'pl-10 pr-16': border === 'bottom' && type === 'password',

package/app/components/fields/FieldSelect.vue

@@ -243,15 +243,18 @@ function selectOption(event: MouseEvent, value: string) {
             'base-border-active': opened,
             'base-border-hover': !opened && !disabled,
             'base-border-interactive-focus-visible': !disabled,
-            'text-xs h-10': size === 'sm',
-            'text-sm h-12': size === 'base',
-            'text-base h-14': size === 'lg',
-            'px-3': padding && !hideLabel && !square,
+            'text-xs h-sm': size === 'sm' && !square,
+            'text-sm h-base': size === 'base' && !square,
+            'text-base h-lg': size === 'lg' && !square,
+            'text-xs size-sm': size === 'sm' && square,
+            'text-sm size-base': size === 'base' && square,
+            'text-base size-lg': size === 'lg' && square,
+            'px-sm': padding && !hideLabel && !square && size === 'sm',
+            'px-base': padding && !hideLabel && !square && size === 'base',
+            'px-lg': padding && !hideLabel && !square && size === 'lg',
             'px-2': padding && hideLabel && !square,
             'inline-flex w-fit gap-1': hideLabel && !square,
-            'justify-center w-10': square && size === 'sm',
-            'justify-center w-12': square && size === 'base',
-            'justify-center w-14': square && size === 'lg',
+            'justify-center': square,
           }"
           role="button"
           :aria-disabled="disabled"
@@ -350,7 +353,11 @@ function selectOption(event: MouseEvent, value: string) {
                 :autocomplete="false"
                 background="white"
                 border="none"
-                class="px-3"
+                :class="{
+                  'px-sm': size === 'sm',
+                  'px-base': size === 'base',
+                  'px-lg': size === 'lg',
+                }"
                 :placeholder="searchPlaceholder || t('search')"
                 :size="size"
                 @keydown="onSearchKeydown"
@@ -385,10 +392,10 @@ function selectOption(event: MouseEvent, value: string) {
                 :key="option.value"
                 class="flex cursor-pointer items-center outline-none"
                 :class="{
-                  'base-border-b base-bg-hover px-3 last:border-b-0': computedColumns.length < 2,
-                  'h-10': size === 'sm' && computedColumns.length < 2,
-                  'h-12': size === 'base' && computedColumns.length < 2,
-                  'h-14': size === 'lg' && computedColumns.length < 2,
+                  'base-border-b base-bg-hover last:border-b-0': computedColumns.length < 2,
+                  'h-sm px-sm': size === 'sm' && computedColumns.length < 2,
+                  'h-base px-base': size === 'base' && computedColumns.length < 2,
+                  'h-lg px-lg': size === 'lg' && computedColumns.length < 2,
                   'base-bg-hover px-2 py-1 last:mb-2': computedColumns.length >= 2,
                   'font-medium underline': option.value === selectedOption?.value,
                   'text-gray-900 dark:text-gray-100': option.value === selectedOption?.value,

package/app/components/fields/FieldTabs.vue

@@ -51,16 +51,19 @@ 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-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' && 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',
+        'px-sm': size === 'sm',
+        'px-base': size === 'base',
+        'px-lg': size === 'lg',
+        'py-1 sm:py-2': size === 'sm' && theme === 'rounded' && orientation === 'responsive',
+        'py-1.5 sm:py-2.5': size === 'base' && theme === 'rounded' && orientation === 'responsive',
+        'py-2 sm:py-3': (size === 'lg' && theme === 'rounded' || size === 'sm' && theme === 'border') && orientation === 'responsive',
+        'py-2.5 sm:py-3.5': size === 'base' && theme === 'border' && orientation === 'responsive',
+        'py-3 sm:py-4': size === 'lg' && theme === 'border' && orientation === 'responsive',
+        'py-2': size === 'sm' && theme === 'rounded' && orientation !== 'responsive',
+        'py-2.5': size === 'base' && theme === 'rounded' && orientation !== 'responsive',
+        'py-3': (size === 'lg' && theme === 'rounded' || size === 'sm' && theme === 'border') && orientation !== 'responsive',
+        'py-3.5': size === 'base' && theme === 'border' && orientation !== 'responsive',
+        'py-4': size === 'lg' && theme === 'border' && orientation !== 'responsive',
         'border-b-2 border-gray-300 dark:border-gray-700 transition duration-500': 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',

package/app/components/fields/FieldTextarea.vue

@@ -82,7 +82,9 @@ function syncModelValueFromTarget(target: EventTarget | null) {
         'uppercase': uppercase,
         'field-disabled': disabled,
         'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
-        'p-2.5': padding,
+        'px-sm py-2.5': padding && size === 'sm',
+        'px-base py-2.5': padding && size === 'base',
+        'px-lg py-2.5': padding && size === 'lg',
         'p-0': !padding,
         'resize-none': !resize,
         'bg-gray-100 dark:bg-gray-900': background === 'gray',

package/app/components/fields/FieldTime.vue

@@ -55,15 +55,15 @@ function onFieldBlur(event: FocusEvent) {
     />
 
     <div
-      class="flex cursor-pointer items-center gap-2 overflow-hidden base-box px-3 font-normal"
+      class="flex cursor-pointer items-center gap-2 overflow-hidden base-box font-normal"
       :class="{
         'field-disabled': disabled,
         'base-border-interactive-focus-within': !disabled,
         'bg-gray-100 dark:bg-gray-900': background === 'gray',
         'bg-white dark:bg-gray-900': background === 'white',
-        'text-xs h-10': size === 'sm',
-        'text-sm h-12': size === 'base',
-        'text-base h-14': size === 'lg',
+        'text-xs h-sm px-sm': size === 'sm',
+        'text-sm h-base px-base': size === 'base',
+        'text-base h-lg px-lg': size === 'lg',
       }"
       role="button"
       :aria-disabled="disabled"

package/app/components/layout/LayoutBottomSheet.vue

@@ -229,7 +229,7 @@ watch(visible, (isVisible) => {
             @pointermove="onPointerMove"
             @pointerup="onPointerUp"
           >
-            <div class="h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-700" />
+            <div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-700" />
           </div>
 
           <slot name="hero" />

package/package.json

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

package/uno.config.ts

@@ -42,7 +42,19 @@ export const shortcuts: Record<string, string> = {
   'base-surface': 'border base-border base-bg shadow-sm',
   'field-disabled': 'opacity-50 cursor-not-allowed',
   'field-uppercase': 'uppercase [&_*]:uppercase [&_input::placeholder]:uppercase',
+  'h-base': 'h-12',
+  'h-lg': 'h-14',
+  'h-sm': 'h-10',
+  'min-h-base': 'min-h-12',
+  'min-h-lg': 'min-h-14',
+  'min-h-sm': 'min-h-10',
+  'px-base': 'px-4',
+  'px-lg': 'px-5',
+  'px-sm': 'px-3',
   'scroll-y-stable': 'overflow-y-auto [scrollbar-gutter:stable]',
+  'size-base': 'h-12 w-12',
+  'size-lg': 'h-14 w-14',
+  'size-sm': 'h-10 w-10',
 }
 
 export const theme = {