@imaginario27/air-ui-ds 1.9.3 → 1.10.0

package/CHANGELOG.md

@@ -5,6 +5,39 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.9.4 - 2026-04-06
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. fix CardTitle text color ([6a8807b](https://github.com/imaginario27/air-ui/commit/6a8807b9c4a3b22aa3f2b78eada1d8421ae9ed85))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.9.3 - 2026-04-06
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. fix SelectField empty div with multiple option and badge stack ([041fd2d](https://github.com/imaginario27/air-ui/commit/041fd2df2eab1a17c83b51cc736d0d7ce591faf6))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.9.2 - 2026-03-31
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. fix typecheck issues ([763c932](https://github.com/imaginario27/air-ui/commit/763c932692a380b5b172d1258dcbb38083a27fde))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.9.1 - 2026-03-31
 
 Release type: patch.

package/components/cards/CardTitle.vue

@@ -1,5 +1,5 @@
 <template>
-    <h3 class="font-semibold w-full">
+    <h3 class="font-semibold w-full text-text-default">
         {{ title }}
     </h3>
 </template>

package/components/dropdowns/DropdownMenu.vue

@@ -71,6 +71,8 @@
                                 :to="item.to"
                                 :isExternal="item.isExternal"
                                 :hasSeparator="item.hasSeparator"
+                                :disabled="disabled || item.disabled"
+                                :prefetchOn
                                 @click="handleClick(item.callback)"
                             />
                         </template>
@@ -129,6 +131,8 @@
                             :to="item.to"
                             :isExternal="item.isExternal"
                             :hasSeparator="item.hasSeparator"
+                            :disabled="disabled || item.disabled"
+                            :prefetchOn
                             @click="handleClick(item.callback)"
                         />
                     </template>
@@ -193,6 +197,14 @@ const props = defineProps({
         default: Trigger.CLICK,
         validator: (value: Trigger) => Object.values(Trigger).includes(value),
     },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
 })
 
 // Refs
@@ -251,6 +263,8 @@ const getActivatorElement = () => {
 }
 
 const onActivatorClick = (event: MouseEvent) => {
+    if(props.disabled) return
+
     if (props.trigger !== Trigger.CLICK) return
     if (!activatorWrapper.value) return
 
@@ -260,6 +274,8 @@ const onActivatorClick = (event: MouseEvent) => {
 }
 
 const onActivatorMouseEnter = () => {
+    if(props.disabled) return
+
     if (props.trigger !== Trigger.HOVER) return
 
     clearCloseTimer()
@@ -267,6 +283,8 @@ const onActivatorMouseEnter = () => {
 }
 
 const onActivatorMouseLeave = () => {
+    if(props.disabled) return
+
     if (props.trigger !== Trigger.HOVER) return
 
     scheduleClose()

package/components/dropdowns/DropdownMenuItem.vue

@@ -16,6 +16,7 @@
             typeClass,
             hasSeparator ? 'border-b border-border-default' : undefined,
             helpText ? 'py-2' : undefined,
+            disabled && 'opacity-disabled cursor-not-allowed pointer-events-none',
         ]"
     >
         <div class="flex items-center gap-3 w-full">
@@ -120,6 +121,14 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
 })
 
 // States
@@ -128,6 +137,8 @@ const isImageLoaded = ref(true)
 // Emits
 const emit = defineEmits(["click", "close"])
 const emitClick = () => {
+    if (props.disabled) return
+
     if (props.actionType === DropdownActionType.ACTION) {
         emit("click")
         emit("close")
@@ -196,6 +207,7 @@ const componentProps = computed(() => {
             target: props.isExternal ? '_blank' : '_self',
             rel: props.isExternal ? 'noopener noreferrer' : undefined,
             external: props.isExternal,
+            prefetchOn: props.prefetchOn,
         }
     } else {
         return {}

package/components/dropdowns/DropdownSelect.vue

@@ -6,7 +6,7 @@
             :shouldTeleport="false"
             :positionClass="`absolute ${dropdownPositionClass}`"
             zIndex="10"
-            dropdownClass="max-w-full"
+            :dropdownClass
             :class="[ 
                 'max-h-[200px]', 
                 'overflow-y-auto', 
@@ -128,7 +128,7 @@
                             'p-2', 
                             'sticky',
                             'top-0', 
-                            'bg-white', 
+                            'bg-background-container-surface', 
                             'z-10'
                         ]"
                     >
@@ -300,6 +300,12 @@ const dropdownPositionClass = computed(() => {
     return positionVariant[props.dropdownPosition as Position] || 'top-full mt-1'
 })
 
+const dropdownClass = computed(() => {
+    const baseClass= 'max-w-full'
+
+    return props.filterable? `${baseClass} pt-0!` : baseClass
+})
+
 // States
 const isImageLoaded = ref(true)
 const selected = ref<SelectOption[] | SelectOption | null>(props.multiple ? [] : null)

package/components/layouts/headers/CompactHeader.vue

@@ -67,6 +67,7 @@
                     :submenuYOffset
                     :submenuDropdownClass
                     :submenuTrigger
+                    :prefetchOn
                     :class="navMenuClass"
                 />
 
@@ -103,6 +104,7 @@
                             :to="item.to"
                             :isExternal="item.isExternal"
                             :actionType="item.actionType"
+                            :prefetchOn
                             @click="item.callback"
                         />
                     </template>
@@ -224,6 +226,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
     navMenuClass: {
         type: String as PropType<string>,
         default: 'hidden lg:flex'

package/components/navigation/nav-menu/NavMenu.vue

@@ -43,6 +43,7 @@
                 :text="item.text"
                 :to="item.to"
                 :detectActive="props.detectActive"
+                :prefetchOn
             />
         </template>
     </nav>
@@ -84,6 +85,10 @@ const props = defineProps({
         default: Trigger.CLICK,
         validator: (value: Trigger) => Object.values(Trigger).includes(value),
     },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
 })
 
 // Composables

package/components/navigation/nav-menu/NavMenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink :to="to">
+    <NuxtLink :to :prefetch-on="prefetchOn">
         <span 
             :class="[
                 'font-medium',
@@ -28,6 +28,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
 })
 
 // Composables

package/components/navigation/nav-sidebar/NavSidebar.vue

@@ -125,6 +125,8 @@
                         :text="item.text"
                         :icon="item.icon"
                         :to="item.to"
+                        :disabled="item.disabled"
+                        :prefetchOn
                         :styleType="itemsStyleType"
                         :textClass="itemsTextClass"
                         :iconClass="itemsIconClass"
@@ -143,6 +145,8 @@
                             :text="child.text"
                             :icon="child.icon"
                             :to="child.to"
+                            :disabled="child.disabled"
+                            :prefetchOn
                             :styleType="itemsStyleType"
                             :textClass="subItemsTextClass"
                             :iconClass="subItemsIconClass"
@@ -320,6 +324,10 @@ const props = defineProps({
     subItemsCustomClass: String as PropType<string>,
     subItemsTextClass: String as PropType<string>,
     subItemsIconClass: String as PropType<string>,
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
 })
 
 // States 

package/components/navigation/nav-sidebar/NavSidebarMenuItem.vue

@@ -6,6 +6,7 @@
             'flex',
             'items-center',
             'text-sm',
+            'text-left',
             'font-semibold',
             'rounded-lg',
             'hover:bg-background-neutral-hover',
@@ -13,6 +14,7 @@
             spacingClass,
             !isActive && 'text-text-default',
             isActive && 'text-text-primary-brand-on-neutral-hover-bg bg-background-neutral-hover',
+            disabled && 'opacity-disabled cursor-not-allowed pointer-events-none',
         ]"
         @click="$emit('click')"
     >
@@ -32,7 +34,7 @@
 
             <span
                 v-if="!isCollapsed"
-                :class="textClass"
+                :class="[disabled && 'select-none', textClass]"
             >
                 {{ text }}
             </span>
@@ -82,6 +84,14 @@ const props = defineProps({
     },
     textClass: String as PropType<string>,
     iconClass: String as PropType<string>,
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
 })
 
 // Emits 
@@ -147,7 +157,7 @@ const componentTag = computed(() => {
 
 const componentProps = computed(() => {
     if (props.to) {
-        return { to: props.to }
+        return { to: props.to, prefetchOn: props.prefetchOn }
     }
 
     return { type: 'button' }

package/components/tabs/Tab.vue

@@ -7,7 +7,8 @@
             'px-3',
             'hover:cursor-pointer',
             'group',
-            styleClass
+            disabled && 'opacity-disabled cursor-not-allowed pointer-events-none',
+            styleClass,
         ]"
     >
         <Icon
@@ -36,6 +37,7 @@
             :class="[
                 'text-sm',
                 'font-semibold',
+                disabled && 'select-none',
             ]"
         >
             {{ text }}
@@ -88,6 +90,10 @@ const props = defineProps({
         default: false,
     },
     badgeValue: [String, Number] as PropType<string | number>,
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // States

package/components/tabs/TabBar.vue

@@ -5,6 +5,7 @@
             hasContainer && 'border border-border-default',
             hasContainer && containerStyleClass,
             hasContainer && isContainerFullWidth && 'w-full',
+            disabled && 'opacity-disabled cursor-not-allowed pointer-events-none',
         ]"
     >
         <Tab 
@@ -15,10 +16,13 @@
             :imgUrl="tab.imgUrl" 
             :badgeValue="tab.badgeValue"
             :active="index === activeIndex" 
+            :disabled="disabled || tab.disabled"
             :tabStyle
             :size="tabSize"
             :decoration
             @click="handleTabClick(index, tab.to)"
+            @pointerenter="handleTabPrefetch(tab.to)"
+            @focus="handleTabPrefetch(tab.to)"
         />
     </div>
 </template>
@@ -59,6 +63,14 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
 })
 
 // Local
@@ -69,7 +81,7 @@ const emit = defineEmits(['update:modelValue'])
 
 // Methods
 const handleTabClick = (index: number, to?: string) => {
-    if(to) { // If the to is provided, navigate to the route
+    if(to) {
         navigateTo(to)
         return
     }
@@ -78,6 +90,24 @@ const handleTabClick = (index: number, to?: string) => {
     emit('update:modelValue', index)
 }
 
+const shouldPrefetchOn = (trigger: PrefetchOn): boolean => {
+  if (typeof props.prefetchOn === 'string') {
+    return props.prefetchOn === trigger
+  }
+  
+  return trigger === PrefetchOn.VISIBILITY
+    ? !!props.prefetchOn?.visibility
+    : !!props.prefetchOn?.interaction
+}
+
+const handleTabPrefetch = (to?: string) => {
+  if (!to) return
+
+  if (!shouldPrefetchOn(PrefetchOn.INTERACTION)) return
+
+  // fire and forget — do not await to avoid blocking
+  preloadRouteComponents(to)
+}
 // Watchers
 watch(() => props.modelValue, (newVal) => {
     activeIndex.value = newVal
@@ -93,5 +123,4 @@ const containerStyleClass = computed(() => {
 
     return variant[props.tabSize as TabSize] || "p-4 rounded-md"
 })
-
 </script>

package/models/enums/prefetch.ts

@@ -0,0 +1,4 @@
+export enum PrefetchOn {
+    VISIBILITY = 'visibility',
+    INTERACTION = 'interaction',
+}

package/models/types/dropdowns.ts

@@ -12,5 +12,6 @@ export interface DropdownMenuItem {
     to?: string
     isExternal?: boolean
     hasSeparator?: boolean
+    disabled?: boolean
     callback?: () => void
 }

package/models/types/navigation.ts

@@ -22,4 +22,5 @@ export interface SidebarMenuItem {
     to?: string
     isSectionTitle?: boolean
     children?: SidebarMenuItem[]
+    disabled?: boolean
 }

package/models/types/prefetch.ts

@@ -0,0 +1,6 @@
+export type PrefetchOnStrategy =
+  | PrefetchOn
+  | {
+      visibility?: boolean
+      interaction?: boolean
+    }

package/models/types/tabs.ts

@@ -4,4 +4,5 @@ export interface TabItem {
     imgUrl?: string
     badgeValue?: number | string
     to?: string
+    disabled?: boolean
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.9.3",
+    "version": "1.10.0",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",