@saasmakers/ui 2.0.24 → 2.0.26

package/app/components/bases/BaseAction.vue

@@ -53,8 +53,8 @@ function onClick(event: MouseEvent) {
       'gap-1.5 p-3': size === 'base',
       'gap-2 p-4': size === 'lg',
       'border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900': variant === 'outline' && !active,
-      'border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-800': variant === 'outline' && active,
-      'hover:border-gray-300 dark:hover:border-gray-700': variant === 'outline' && !disabled && !loading,
+      'base-highlight-indigo': variant === 'outline' && active,
+      'hover:border-gray-300 dark:hover:border-gray-700': variant === 'outline' && !active && !disabled && !loading,
       'bg-gray-100 dark:bg-gray-800': variant === 'filled',
     }"
     :disabled="disabled || loading"

package/app/components/fields/FieldInput.vue

@@ -138,7 +138,10 @@ function onTogglePasswordVisibility() {
   showPassword.value = !showPassword.value
 }
 
-defineExpose({ blur, focus })
+defineExpose({
+  blur,
+  focus,
+})
 </script>
 
 <template>

package/app/components/fields/FieldLabel.vue

@@ -25,10 +25,10 @@ const isClickable = computed(() => {
 
 const textSize = computed<BaseSize>(() => {
   switch (props.size) {
-    case 'lg':
-      return 'base'
     case 'base':
       return 'sm'
+    case 'lg':
+      return 'base'
     case 'sm':
       return 'xs'
     default:

package/app/components/fields/FieldSelect.vue

@@ -276,7 +276,7 @@ function selectOption(event: MouseEvent, value: string) {
           :initial="fadeIn.initial"
         >
           <div
-            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="options min-w-xs overflow-y-auto border base-border-active 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="base-border-b sticky top-0 z-10 bg-white dark:bg-gray-900"
+              class="sticky top-0 z-10 base-border-b 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="base-border-b flex justify-center p-3"
+              class="flex justify-center base-border-b p-3"
             >
               <BaseIcon
                 class="pointer-events-none"

package/app/components/fields/FieldTime.vue

@@ -55,7 +55,7 @@ function onFieldBlur(event: FocusEvent) {
     />
 
     <div
-      class="base-box flex cursor-pointer items-center gap-2 overflow-hidden px-3 font-normal"
+      class="flex cursor-pointer items-center gap-2 overflow-hidden base-box px-3 font-normal"
       :class="{
         'field-disabled': disabled,
         'base-border-interactive-focus-within': !disabled,

package/app/types/bases.d.ts

@@ -24,10 +24,6 @@ export interface BaseAlert {
 // Global types for bases
 export type BaseAlignment = 'center' | 'left' | 'right'
 
-export type BaseButtonShape = 'circle' | 'default' | 'square'
-
-export type BaseAvatarShape = 'circle' | 'square'
-
 export interface BaseAvatar {
   bordered?: boolean
   borderWidth?: number
@@ -39,6 +35,8 @@ export interface BaseAvatar {
   to?: RouteLocationNamedI18n
 }
 
+export type BaseAvatarShape = 'circle' | 'square'
+
 export type BaseBackground = 'gray' | 'white'
 
 export interface BaseBordered {
@@ -70,6 +68,8 @@ export interface BaseButton {
   type?: BaseButtonType
 }
 
+export type BaseButtonShape = 'circle' | 'default' | 'square'
+
 export type BaseButtonSize
   = | '2xs'
     | 'base'

package/app/types/global.d.ts

@@ -20,10 +20,12 @@ declare global {
   type BaseAlert = import('./bases').BaseAlert
   type BaseAlignment = import('./bases').BaseAlignment
   type BaseAvatar = import('./bases').BaseAvatar
+  type BaseAvatarShape = import('./bases').BaseAvatarShape
   type BaseBackground = import('./bases').BaseBackground
   type BaseBordered = import('./bases').BaseBordered
   type BaseBorderedColor = import('./bases').BaseBorderedColor
   type BaseButton = import('./bases').BaseButton
+  type BaseButtonShape = import('./bases').BaseButtonShape
   type BaseButtonSize = import('./bases').BaseButtonSize
   type BaseButtonType = import('./bases').BaseButtonType
   type BaseCard = import('./bases').BaseCard
@@ -66,8 +68,6 @@ declare global {
   type BaseQuoteSize = import('./bases').BaseQuoteSize
   type BaseShortcut = import('./bases').BaseShortcut
   type BaseSize = import('./bases').BaseSize
-  type BaseButtonShape = import('./bases').BaseButtonShape
-  type BaseAvatarShape = import('./bases').BaseAvatarShape
   type BaseSpinner = import('./bases').BaseSpinner
   type BaseStatus = import('./bases').BaseStatus
   type BaseTag = import('./bases').BaseTag

package/package.json

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

package/uno.config.ts

@@ -34,8 +34,10 @@ export const shortcuts: Record<string, string> = {
   '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-bg': 'bg-white dark:bg-gray-900',
   'base-box': 'border shadow-sm base-border rounded-lg',
-  'base-surface': 'border base-border bg-white dark:bg-gray-900 shadow-sm',
+  'base-highlight-indigo': 'border border-indigo-600/35 bg-indigo-600/[0.08] dark:border-indigo-400/35 dark:bg-indigo-400/[0.08]',
+  'base-surface': 'border base-border base-bg shadow-sm',
   'field-disabled': 'opacity-50 cursor-not-allowed',
   'scroll-y-stable': 'overflow-y-auto [scrollbar-gutter:stable]',
 }