@saasmakers/ui 2.0.19 → 2.0.21

package/app/components/auth/AuthBox.vue

@@ -76,7 +76,7 @@ async function onSocialConnectSuccess(payload: AuthSocialConnectSuccess) {
 <template>
   <div
     class="flex flex-col items-center"
-    :class="{ 'rounded-lg bg-gray-100 dark:bg-gray-900 border shadow-sm border-gray-200 dark:border-gray-800 p-6 sm:p-10': hasBox }"
+    :class="{ 'base-box bg-gray-100 dark:bg-gray-900 p-6 sm:p-10': hasBox }"
   >
     <div class="w-full flex flex-col gap-6 sm:w-96">
       <BaseAlert

package/app/components/bases/BaseBordered.vue

@@ -23,7 +23,7 @@ defineSlots<{
       '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',
+      'base-border': borderColor === 'gray',
     }"
   >
     <BaseText

package/app/components/bases/BaseCard.vue

@@ -56,11 +56,11 @@ function onClick(event: MouseEvent) {
       'cursor-default': !isClickable,
       'cursor-pointer': isClickable,
       'opacity-50': disabled,
-      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-1.5 pr-2.5': hasBackground && size === 'base' && orientation === 'horizontal',
-      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-2.5 pr-4': hasBackground && size === 'lg' && orientation === 'horizontal',
-      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-3': hasBackground && size === 'base' && orientation === 'vertical',
-      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-4': hasBackground && size === 'lg' && orientation === 'vertical',
-      'hover:border-gray-300 dark:hover:border-gray-700': hasBackground && isClickable,
+      'base-surface p-1.5 pr-2.5': hasBackground && size === 'base' && orientation === 'horizontal',
+      'base-surface p-2.5 pr-4': hasBackground && size === 'lg' && orientation === 'horizontal',
+      'base-surface p-3': hasBackground && size === 'base' && orientation === 'vertical',
+      'base-surface p-4': hasBackground && size === 'lg' && orientation === 'vertical',
+      'base-border-hover': hasBackground && isClickable,
       'rounded-xl': hasBackground,
       'relative': orientation === 'vertical',
     }"
@@ -83,7 +83,7 @@ function onClick(event: MouseEvent) {
           :class="{
             'border shadow-inner': !avatar && !image,
             'rounded-lg': !avatar && !image,
-            'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900': !avatar && !image,
+            'base-border bg-gray-100 dark:bg-gray-900': !avatar && !image,
             'mr-2': orientation === 'horizontal' && size === 'base',
             'mr-3': orientation === 'horizontal' && size === 'lg',
             'mb-2': orientation === 'vertical' && size === 'base',

package/app/components/bases/BaseEmoji.vue

@@ -34,11 +34,11 @@ function onKeyDown(event: KeyboardEvent) {
   <span
     class="flex items-center justify-center transition"
     :class="{
-      'border border-gray-200 dark:border-gray-800': hasBox,
+      'border base-border': hasBox,
       'bg-gray-100 dark:bg-gray-900 shadow-inner': hasBox && background === 'gray',
       'bg-white dark:bg-gray-900 shadow-sm': hasBox && background === 'white',
       'cursor-pointer hover:border-gray-400 dark:hover:border-gray-600': clickable && (!hasBox || background === 'gray'),
-      'cursor-pointer hover:border-gray-300 focus-visible:border-gray-400 dark:hover:border-gray-700 dark:focus-visible:border-gray-600': clickable && hasBox && background === 'white',
+      'cursor-pointer base-border-interactive-focus-visible': clickable && hasBox && background === 'white',
       'rounded': ['xs'].includes(size) && hasBox,
       'rounded-md': ['sm', 'base'].includes(size) && hasBox,
       'rounded-lg': ['lg', 'xl'].includes(size) && hasBox,

package/app/components/bases/BaseMessage.vue

@@ -17,7 +17,7 @@ defineSlots<{
 <template>
   <div
     class="flex flex-col items-center bg-gray-100 text-center text-gray-900 dark:bg-gray-900 dark:text-gray-100"
-    :class="{ 'rounded-lg border border-gray-200 dark:border-gray-800 p-6 sm:p-10': bordered }"
+    :class="{ 'base-border rounded-lg border p-6 sm:p-10': bordered }"
   >
     <div
       v-if="$slots.image"

package/app/components/fields/FieldAvatar.vue

@@ -81,11 +81,11 @@ function onOpenFilePicker() {
         'field-disabled': disabled,
         'pointer-events-none opacity-50': disabled,
         'pointer-events-none': loading,
-        'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full' && !disabled && !loading,
+        'base-border-interactive': border === 'full' && !disabled && !loading,
         'bg-gray-100 dark:bg-gray-900': background === 'gray',
         'bg-white dark:bg-gray-900': background === 'white',
-        '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',
+        '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',

package/app/components/fields/FieldCheckbox.vue

@@ -18,23 +18,6 @@ withDefaults(defineProps<Omit<FieldCheckbox, 'modelValue'>>(), {
 
 const id = useId()
 const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
-const isAnimatingCheck = ref(false)
-
-watch(modelValue, (value) => {
-  if (!value) {
-    isAnimatingCheck.value = false
-  }
-})
-
-function onChange(event: Event) {
-  isAnimatingCheck.value = (event.target as HTMLInputElement).checked
-}
-
-function onCheckAnimationEnd(event: AnimationEvent) {
-  if (event.animationName.startsWith('pop-in')) {
-    isAnimatingCheck.value = false
-  }
-}
 </script>
 
 <template>
@@ -43,7 +26,10 @@ function onCheckAnimationEnd(event: AnimationEvent) {
     :class="{ 'w-full': fullWidth }"
     @click.stop
   >
-    <div class="group flex flex-1 items-center">
+    <div
+      class="flex flex-1 items-center"
+      :class="{ group: !!label }"
+    >
       <label
         v-if="!loading"
         class="relative flex items-center justify-center flex-initial"
@@ -59,31 +45,27 @@ function onCheckAnimationEnd(event: AnimationEvent) {
           :class="{ 'field-disabled': disabled }"
           :disabled="disabled"
           type="checkbox"
-          @change="onChange"
         >
 
         <span
           aria-hidden="true"
           class="flex items-center justify-center border-2 rounded-full transition-[background-color,border-color] duration-200 ease-out"
           :class="{
-            'animate-pop-in motion-reduce:animate-none': isAnimatingCheck,
             'border-transparent bg-indigo-600 dark:bg-indigo-400': modelValue,
-            'border-gray-300 dark:border-gray-600': !modelValue,
-            'group-hover:border-gray-400 dark:group-hover:border-gray-500': !disabled && !modelValue,
+            'base-border': !modelValue,
+            'base-border-group-hover': !disabled && !modelValue,
             'group-hover:bg-indigo-700 dark:group-hover:bg-indigo-300': !disabled && modelValue,
             'h-4 w-4': size === 'sm',
             'h-4.5 w-4.5': size === 'base',
             'h-5 w-5': size === 'lg',
             'peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500/40 peer-focus-visible:ring-offset-2 peer-focus-visible:outline-none': !disabled,
           }"
-          @animationend="onCheckAnimationEnd"
         >
           <Icon
             v-if="modelValue"
             :name="getLayerIcon('check')"
             class="shrink-0 text-white"
             :class="{
-              'animate-fade-in': isAnimatingCheck,
               'size-2.5': size === 'sm',
               'size-3': size === 'base',
               'size-3.5': size === 'lg',

package/app/components/fields/FieldEmojis.vue

@@ -55,7 +55,7 @@ function onEmojiClick(event: MouseEvent, emoji?: string) {
 
 <template>
   <div
-    class="border border-gray-200 rounded-lg p-4 shadow-sm dark:border-gray-800"
+    class="base-box p-4"
     :class="{ 'field-disabled': disabled }"
   >
     <FieldInput

package/app/components/fields/FieldInput.vue

@@ -190,11 +190,11 @@ defineExpose({ blur, focus })
             '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': border === 'full',
+            'base-box': border === 'full',
             'pl-3 pr-10': border === 'full' && type === 'password',
             'px-3': border === 'full' && type !== 'password',
-            'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full' && !disabled,
-            'border-b border-gray-200 dark:border-gray-800': border === 'bottom',
+            'base-border-interactive': border === 'full' && !disabled,
+            'base-border-b': border === 'bottom',
             'pl-10 pr-16': border === 'bottom' && type === 'password',
             'px-10': border === 'bottom' && type !== 'password',
             'border-0 p-0': border === 'none' && type !== 'password',

package/app/components/fields/FieldSelect.vue

@@ -214,12 +214,12 @@ function selectOption(event: MouseEvent, value: string) {
         <div
           class="group flex items-center rounded-lg bg-white outline-none dark:bg-gray-900"
           :class="{
-            'border shadow-sm border-gray-200 dark:border-gray-800': border === 'full',
-            'border-b border-gray-200 dark:border-gray-800': border === 'bottom',
+            'base-box': border === 'full',
+            'base-border-b': border === 'bottom',
             'border-0': border === 'none',
-            'border-gray-400 dark:border-gray-600': opened,
-            'hover:border-gray-300 dark:hover:border-gray-700': !opened && !disabled,
-            'focus-visible:border-gray-400 dark:focus-visible:border-gray-600': !disabled,
+            'base-border-active': opened,
+            'base-border-hover': !opened && !disabled,
+            'base-border-interactive-focus-visible': !disabled,
             'px-3': padding,
             'text-xs h-10': size === 'sm',
             'text-sm h-12': size === 'base',
@@ -276,7 +276,7 @@ function selectOption(event: MouseEvent, value: string) {
           :initial="fadeIn.initial"
         >
           <div
-            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="options base-border-active min-w-xs overflow-y-auto border rounded-lg bg-white text-gray-600 font-medium dark:bg-gray-900 dark:text-gray-400"
             :class="{
               'md:min-w-xl p-1 pb-0': computedColumns.length >= 2,
               'mt-8': size === 'sm' && !padding && direction === 'bottom',
@@ -293,7 +293,7 @@ function selectOption(event: MouseEvent, value: string) {
           >
             <div
               v-if="searchable"
-              class="sticky top-0 z-10 border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
+              class="base-border-b sticky top-0 z-10 bg-white dark:bg-gray-900"
               @click.stop
             >
               <FieldInput
@@ -311,7 +311,7 @@ function selectOption(event: MouseEvent, value: string) {
 
             <div
               v-if="searchable && searchQueryCleaned && !firstFilteredOption"
-              class="flex justify-center border-b border-gray-200 p-3 dark:border-gray-800"
+              class="base-border-b flex justify-center p-3"
             >
               <BaseIcon
                 class="pointer-events-none"
@@ -337,7 +337,7 @@ function selectOption(event: MouseEvent, value: string) {
                 :key="option.value"
                 class="flex cursor-pointer items-center outline-none"
                 :class="{
-                  'border-b border-gray-200 dark:border-gray-800 p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
+                  'base-border-b p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
                   'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 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/FieldTextarea.vue

@@ -78,8 +78,8 @@ function onFieldClick(event: MouseEvent) {
         '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': border,
-        'hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-400 dark:focus:border-gray-600': border && !disabled,
+        'base-box': border,
+        'base-border-interactive': border && !disabled,
         'border-0': !border,
         'text-xs': size === 'sm',
         'text-sm': size === 'base',

package/app/components/fields/FieldTime.vue

@@ -55,10 +55,10 @@ function onFieldBlur(event: FocusEvent) {
     />
 
     <div
-      class="flex cursor-pointer items-center gap-2 overflow-hidden border border-gray-200 rounded-lg px-3 font-normal dark:border-gray-800"
+      class="base-box flex cursor-pointer items-center gap-2 overflow-hidden px-3 font-normal"
       :class="{
         'field-disabled': disabled,
-        'focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700': !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',

package/app/components/layout/LayoutBottomSheet.vue

@@ -63,12 +63,6 @@ function onHeaderPointerDown(event: PointerEvent) {
   handle.setPointerCapture(event.pointerId)
 }
 
-function onPanelAfterEnter(element: Element) {
-  // Drop the identity transform after the open animation so nested SortableJS
-  // fallbacks on iOS resolve viewport coordinates instead of a transformed ancestor.
-  element.classList.remove('translate-y-0')
-}
-
 function onPanelTransitionEnd(event: TransitionEvent) {
   if (event.propertyName !== 'transform' || !drag.closing) {
     return
@@ -215,7 +209,6 @@ watch(visible, (isVisible) => {
         leave-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         leave-from-class="translate-y-0"
         leave-to-class="translate-y-full motion-reduce:translate-y-0"
-        @after-enter="onPanelAfterEnter"
         @after-leave="onAfterLeave"
       >
         <div

package/package.json

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

package/uno.config.ts

@@ -26,6 +26,16 @@ export const rules: [string, Record<string, string>][] = [
 
 export const shortcuts: Record<string, string> = {
   'app-text': 'font-bold leading-relaxed tracking-tight uppercase',
+  'base-border': 'border-gray-200 dark:border-gray-800',
+  'base-border-active': 'border-gray-400 dark:border-gray-600',
+  'base-border-b': 'border-b border-gray-200 dark:border-gray-800',
+  'base-border-group-hover': 'group-hover:border-gray-300 dark:group-hover:border-gray-700',
+  'base-border-hover': 'hover:border-gray-300 dark:hover:border-gray-700',
+  'base-border-interactive': 'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600',
+  'base-border-interactive-focus-visible': 'hover:border-gray-300 focus-visible:border-gray-400 dark:hover:border-gray-700 dark:focus-visible:border-gray-600',
+  'base-border-interactive-focus-within': 'hover:border-gray-300 focus-within:border-gray-400 dark:hover:border-gray-700 dark:focus-within:border-gray-600',
+  'base-box': 'border shadow-sm base-border rounded-lg',
+  'base-surface': 'border base-border bg-white dark:bg-gray-900 shadow-sm',
   'field-disabled': 'opacity-50 cursor-not-allowed',
   'scroll-y-stable': 'overflow-y-auto [scrollbar-gutter:stable]',
 }
@@ -33,30 +43,22 @@ export const shortcuts: Record<string, string> = {
 export const theme = {
   animation: {
     keyframes: {
-      'fade-in': '{0%,25%{opacity:0}100%{opacity:1}}',
       'fade-pulse': '{0%,100%{opacity:0.25}50%{opacity:1}}',
-      'pop-in': '{from{transform:scale(0.8)}to{transform:scale(1)}}',
       'scale-pulse': '{0%,100%{transform:scale(0)}50%{transform:scale(1)}}',
     },
 
     durations: {
-      'fade-in': '200ms',
       'fade-pulse': '1s',
-      'pop-in': '250ms',
       'scale-pulse': '2s',
     },
 
     timingFns: {
-      'fade-in': 'ease-out',
       'fade-pulse': 'ease-in-out',
-      'pop-in': 'cubic-bezier(0.34,1.56,0.64,1)',
       'scale-pulse': 'linear',
     },
 
     counts: {
-      'fade-in': '1',
       'fade-pulse': 'infinite',
-      'pop-in': '1',
       'scale-pulse': 'infinite',
     },
   },