@imaginario27/air-ui-ds 1.12.2 → 1.13.1

package/CHANGELOG.md

@@ -5,6 +5,28 @@ 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.13.0 - 2026-04-22
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. update MetricCard with new props ([4841cb3](https://github.com/imaginario27/air-ui/commit/4841cb3e6c0a8385825ff91f505b9e5ca732ca44))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.12.2 - 2026-04-22
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. fix focus ring in form fields and icon span rendering when icon is not set ([4b0d548](https://github.com/imaginario27/air-ui/commit/4b0d5484271d25db6902eb1888a532291830fa4d))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.12.1 - 2026-04-16
 
 Release type: patch.

package/components/cards/specific/MetricCard.vue

@@ -1,42 +1,231 @@
 <template>
-    <Card>
+    <Card :class="['gap-5!', containerClass]">
         <CardHeader>
-            <CardTitle 
-                :title 
-                :class="[align === Align.CENTER && 'text-center']"
+            <template v-if="icon">
+                <Icon
+                    v-if="
+                        styleType === DashboardMetricCardStyle.NEUTRAL_FILLED ||
+                        styleType === DashboardMetricCardStyle.PRIMARY_BRAND_FILLED ||
+                        styleType === DashboardMetricCardStyle.SECONDARY_BRAND_FILLED ||
+                        styleType === DashboardMetricCardStyle.CUSTOM_FILLED
+                    "
+                    :name="icon"
+                    :class="textColorClass"
+                />
+                <ContainedIcon
+                    v-else
+                    :icon
+                    :iconSize="IconSize.SM"
+                    :color="iconColor"
+                    :styleType="containedIconStyleType"
+                    :shape="containedIconShape"
+                    class="w-6! h-6! min-w-6! min-h-6!"
+                />
+            </template>
+
+            <CardTitle
+                :title
+                :class="textColorClass"
             />
         </CardHeader>
-        <CardBody>
-            <div :class="['flex flex-col', align === Align.CENTER && 'text-center']">
-                <span class="font-semibold text-2xl md:text-3xl">
-                    {{ value }}
+        <CardBody class="flex flex-col! gap-2!">
+            <div :class="['flex', 'items-end', 'gap-1', textColorClass]">
+                <span class="text-3xl font-semibold">
+                    {{ amount }}
                 </span>
-                <p 
-                    v-if="description"
-                    class="text-text-neutral-subtle text-sm"
+
+                <span
+                    v-if="unit"
+                    class="text-lg font-semibold"
                 >
+                    /{{ unit }}
+                </span>
+            </div>
+
+            <div class="flex flex-col gap-0.5">
+                <p
+                    v-if="featuredDescription"
+                    :class="['text-sm', 'font-semibold', textColorClass]"
+                >
+                    {{ featuredDescription }}
+                </p>
+
+                <p :class="['text-sm', styleType === DashboardMetricCardStyle.DEFAULT ? 'text-text-neutral-subtle' : textColorClass]">
                     {{ description }}
                 </p>
             </div>
+
+            <div
+                v-if="trend"
+                :class="['flex', 'items-center', 'gap-1', trendTextColorClass]"
+            >
+                <Icon
+                    :name="trendIcon"
+                    :size="IconSize.SM"
+                />
+
+                <span class="text-sm mt-0.5">
+                    {{ trend }}
+                </span>
+            </div>
         </CardBody>
     </Card>
 </template>
+
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
+    styleType: {
+        type: String as PropType<DashboardMetricCardStyle>,
+        default: DashboardMetricCardStyle.DEFAULT,
+        validator: (value: DashboardMetricCardStyle) => Object.values(DashboardMetricCardStyle).includes(value),
+    },
     title: {
         type: String as PropType<string>,
-        default: 'Card title'
+        default: "Metric title",
+    },
+    icon: String as PropType<string>,
+    iconContainerShape: {
+        type: String as PropType<IconContainerShape>,
+        default: IconContainerShape.SQUARE,
+        validator: (value: IconContainerShape) => Object.values(IconContainerShape).includes(value),
+    },
+    defaultStyleIconColor: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL,
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
     },
-    value: {
+    defaultStyleIconContainerType: {
+        type: String as PropType<IconContainerStyleType>,
+        default: IconContainerStyleType.FILLED,
+        validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
+    },
+    amount: {
         type: [String, Number] as PropType<string | number>,
-        default: 0
+        default: 0,
+    },
+    unit: String as PropType<string>,
+    featuredDescription: String as PropType<string>,
+    description: {
+        type: String as PropType<string>,
+        default: "Metric description",
+    },
+    trend: String as PropType<string>,
+    trendDirection: {
+        type: String as PropType<DashboardMetricTrendDirection>,
+        default: DashboardMetricTrendDirection.UP,
+        validator: (value: DashboardMetricTrendDirection) => Object.values(DashboardMetricTrendDirection).includes(value),
     },
-    description: String,
-    align: {
-        type: String as PropType<Align.LEFT | Align.CENTER>,
-        default: Align.LEFT,
-        validator: (value: Align) => [Align.LEFT, Align.CENTER].includes(value),
+    customFilledColorClass: {
+        type: String as PropType<string>,
+        default: "bg-background-neutral-bold",
+    },
+});
+
+// Computed
+const trendIcon = computed(() => {
+    const variant: Record<DashboardMetricTrendDirection, string> = {
+        [DashboardMetricTrendDirection.UP]: "mdi:arrow-up",
+        [DashboardMetricTrendDirection.DOWN]: "mdi:arrow-down",
+        [DashboardMetricTrendDirection.NEUTRAL]: "mdi:minus",
+    };
+
+    return variant[props.trendDirection as DashboardMetricTrendDirection] || "mdi:arrow-up";
+});
+
+const containerClass = computed(() => {
+    const variant: Record<DashboardMetricCardStyle, string> = {
+        [DashboardMetricCardStyle.DEFAULT]: "bg-background-container-surface",
+        [DashboardMetricCardStyle.PRIMARY_BRAND_FILLED]: "bg-background-primary-brand-default border-border-primary-brand-default dark",
+        [DashboardMetricCardStyle.PRIMARY_BRAND_SOFT]: "bg-background-primary-brand-soft",
+        [DashboardMetricCardStyle.SECONDARY_BRAND_FILLED]: "bg-background-secondary-brand-default border-border-secondary-brand dark",
+        [DashboardMetricCardStyle.SECONDARY_BRAND_SOFT]: "bg-background-secondary-brand-soft",
+        [DashboardMetricCardStyle.NEUTRAL_FILLED]: "bg-background-neutral-bold dark",
+        [DashboardMetricCardStyle.NEUTRAL_SOFT]: "bg-background-neutral-subtler",
+        [DashboardMetricCardStyle.CUSTOM_FILLED]: props.customFilledColorClass,
+    };
+
+    return variant[props.styleType as DashboardMetricCardStyle] || "bg-background-container-surface";
+});
+
+const containedIconStyleType = computed(() => {
+    if (props.styleType === DashboardMetricCardStyle.DEFAULT) {
+        return props.defaultStyleIconContainerType;
+    }
+
+    return IconContainerStyleType.FILLED;
+});
+
+const containedIconShape = computed(() => {
+    if (props.styleType === DashboardMetricCardStyle.DEFAULT) {
+        return props.iconContainerShape;
+    }
+
+    return IconContainerShape.SQUARE;
+});
+
+const iconColor = computed(() => {
+    if (props.defaultStyleIconColor && props.styleType === DashboardMetricCardStyle.DEFAULT) {
+        return props.defaultStyleIconColor;
     }
-})
-</script>
+
+    const variant: Record<DashboardMetricCardStyle, ColorAccent> = {
+        [DashboardMetricCardStyle.DEFAULT]: ColorAccent.NEUTRAL,
+        [DashboardMetricCardStyle.PRIMARY_BRAND_FILLED]: ColorAccent.PRIMARY_BRAND,
+        [DashboardMetricCardStyle.PRIMARY_BRAND_SOFT]: ColorAccent.PRIMARY_BRAND,
+        [DashboardMetricCardStyle.SECONDARY_BRAND_FILLED]: ColorAccent.SECONDARY_BRAND,
+        [DashboardMetricCardStyle.SECONDARY_BRAND_SOFT]: ColorAccent.SECONDARY_BRAND,
+        [DashboardMetricCardStyle.NEUTRAL_FILLED]: ColorAccent.NEUTRAL,
+        [DashboardMetricCardStyle.NEUTRAL_SOFT]: ColorAccent.NEUTRAL,
+        [DashboardMetricCardStyle.CUSTOM_FILLED]: ColorAccent.NEUTRAL,
+    };
+
+    return variant[props.styleType as DashboardMetricCardStyle] || ColorAccent.NEUTRAL;
+});
+
+const textColorClass = computed(() => {
+    const variant: Record<DashboardMetricCardStyle, string> = {
+        [DashboardMetricCardStyle.DEFAULT]: "text-text-neutral-default",
+        [DashboardMetricCardStyle.PRIMARY_BRAND_FILLED]: "text-text-neutral-on-filled",
+        [DashboardMetricCardStyle.PRIMARY_BRAND_SOFT]: "text-text-primary-brand-on-soft-bg",
+        [DashboardMetricCardStyle.SECONDARY_BRAND_FILLED]: "text-text-neutral-on-filled",
+        [DashboardMetricCardStyle.SECONDARY_BRAND_SOFT]: "text-text-secondary-brand-on-soft-bg",
+        [DashboardMetricCardStyle.NEUTRAL_FILLED]: "text-text-neutral-on-filled",
+        [DashboardMetricCardStyle.NEUTRAL_SOFT]: "text-text-neutral-on-neutral-bg",
+        [DashboardMetricCardStyle.CUSTOM_FILLED]: "text-text-neutral-on-filled",
+    };
+
+    return variant[props.styleType as DashboardMetricCardStyle] || "text-text-neutral-default";
+});
+
+const isFilledStyle = computed(() => {
+    return [
+        DashboardMetricCardStyle.PRIMARY_BRAND_FILLED,
+        DashboardMetricCardStyle.SECONDARY_BRAND_FILLED,
+        DashboardMetricCardStyle.NEUTRAL_FILLED,
+        DashboardMetricCardStyle.CUSTOM_FILLED,
+    ].includes(props.styleType as DashboardMetricCardStyle);
+});
+
+const trendUpClass = computed(() => {
+    return isFilledStyle.value ? "text-text-neutral-on-filled" : "text-text-success";
+});
+
+const trendDownClass = computed(() => {
+    return isFilledStyle.value ? "text-text-neutral-on-filled" : "text-text-error";
+});
+
+const trendNeutralClass = computed(() => {
+    return isFilledStyle.value ? "text-text-neutral-on-filled" : "text-text-neutral-subtle";
+});
+
+const trendTextColorClass = computed(() => {
+    const variant: Record<DashboardMetricTrendDirection, string> = {
+        [DashboardMetricTrendDirection.UP]: trendUpClass.value,
+        [DashboardMetricTrendDirection.DOWN]: trendDownClass.value,
+        [DashboardMetricTrendDirection.NEUTRAL]: trendNeutralClass.value,
+    };
+
+    return variant[props.trendDirection as DashboardMetricTrendDirection] || trendUpClass.value;
+});
+</script>

package/components/layouts/ContentBody.vue

@@ -20,11 +20,15 @@ const props = defineProps({
         type: Number as PropType<number>,
         default: 240,
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
 })
 
 // Composables
 const { isMobileSidebarOpen } = useMobileSidebar()
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 // Computed dynamic style
 const containerStyle = computed(() => {

package/components/layouts/MainContent.vue

@@ -15,13 +15,17 @@
 
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
     tocSidebarWidth: {
         type: Number as PropType<number>,
         default: 240
-    }
+    },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
 })
 
 // Composable
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 </script>

package/components/layouts/headers/CompactHeader.vue

@@ -34,12 +34,12 @@
                         && sidebarTogglePosition === SidebarTogglePosition.LOGO_LEFT_SIDE
                     "
                 >
-                    <ActionIconButton 
+                    <ActionIconButton
                         :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
-                        class="lg:hidden shadow-sm"
+                        :class="['shadow-sm', !isMobile && 'hidden']"
                         @click="toggleMobileSidebar"
                     />
-                </template>  
+                </template>
 
                 <slot name="header-logo" />
 
@@ -49,20 +49,20 @@
                         && sidebarTogglePosition === SidebarTogglePosition.LOGO_RIGHT_SIDE
                     "
                 >
-                    <ActionIconButton 
+                    <ActionIconButton
                         :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
-                        class="lg:hidden shadow-sm"
+                        :class="['shadow-sm', !isMobile && 'hidden']"
                         @click="toggleMobileSidebar"
                     />
-                </template> 
+                </template>
             </div>
 
             <!-- Navigation -->
             <div class="flex gap-3 items-center xs:w-auto">
                 <!-- Horizontal menu -->
-                <NavMenu 
-                    v-if="navMenuItems.length"
-                    :menuItems="navMenuItems" 
+                <NavMenu
+                    v-if="navMenuItems.length && !isMobile"
+                    :menuItems="navMenuItems"
                     :detectActive="detectActiveMenuItem"
                     :submenuYOffset
                     :submenuDropdownClass
@@ -74,7 +74,7 @@
                 <!-- Header actions -->
                 <div 
                     v-if="$slots['header-actions']"
-                    class="gap-3 items-center hidden lg:flex"
+                    :class="['gap-3 items-center', isMobile ? 'hidden' : 'flex']"
                 >
                     <slot name="header-actions" />
                 </div>
@@ -117,9 +117,9 @@
                         :positionYOffset="submenuYOffset"
                     >
                         <template #activator>
-                            <ActionIconButton 
+                            <ActionIconButton
                                 icon="mdi:menu"
-                                class="lg:hidden shadow-sm"
+                                class="shadow-sm"
                             />
                         </template>
                         <template #items>
@@ -197,6 +197,10 @@ const props = defineProps({
         type: Array as PropType<DropdownMenuItem[]>,
         default: () => [],
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
     showMobileMenuToggle: {
         type: Boolean as PropType<boolean>,
         default: true,
@@ -232,18 +236,18 @@ const props = defineProps({
     },
     navMenuClass: {
         type: String as PropType<string>,
-        default: 'hidden lg:flex'
+        default: ''
     },
     navMobileMenuClass: {
         type: String as PropType<string>,
-        default: 'lg:hidden min-w-[280px]'
+        default: 'min-w-[280px]'
     },
     headerClass: String as PropType<string>,
 })
 
 // Composables
 const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 const getSubmenuItems = (item: MenuItem): NonNullable<MenuItem['children']> => {
     return item.children ?? []

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

@@ -14,8 +14,7 @@
             'py-4',
             'border-r border-border-default',
             'transition-all duration-300 ease-in-out',
-            isMobileSidebarOpen ? 'translate-x-0' : '-translate-x-full',
-            'lg:translate-x-0', // Always visible on large screens
+            (!isMobile || isMobileSidebarOpen) ? 'translate-x-0' : '-translate-x-full',
         ]"
     >
         <!-- Collapse & Close Buttons -->
@@ -32,7 +31,7 @@
                 <ActionIconButton 
                     v-if="showMobileSidebarClose && isMobile && !isCollapsed"
                     :icon="mobileSidebarCloseIcon"
-                    class="flex sm:hidden"
+                    class="flex"
                     :size="ButtonSize.SM"
                     @click="toggleMobileSidebar()"
                 />
@@ -294,6 +293,10 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'mdi:close-circle',
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
     isFixed: {
         type: Boolean as PropType<boolean>,
         default: true,
@@ -354,7 +357,7 @@ const {
     setSidebarCollapsed,
     toggleSidebarState,
 } = useSidebar()
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 const MAX_NESTING_LEVEL = 3
 

package/components/pagination/ButtonPagination.vue

@@ -5,8 +5,7 @@
             'justify-between',
             'items-center',
             'gap-3',
-            'flex-col-reverse',
-            'lg:flex-row',
+            isMobile ? 'flex-col-reverse' : 'flex-row',
             'w-full'
         ]"
     >
@@ -26,7 +25,7 @@
                 v-model="itemsPerPage" 
                 :rowsLabel="rowsPerPageLabel"
                 :rowsOptions="rowsPerPageOptions"
-                class="flex lg:hidden" 
+                :class="[isMobile ? 'flex' : 'hidden']"
             /> <!-- Mobile position -->
         </div>
 
@@ -35,10 +34,7 @@
             :class="[
                 'flex',
                 'gap-6',
-                'flex-col',
-                'w-full',
-                'lg:flex-row',
-                'lg:w-auto'
+                isMobile ? 'flex-col w-full' : 'flex-row w-auto'
             ]"
         >
             <RowsPerPage 
@@ -46,7 +42,7 @@
                 v-model="itemsPerPage"
                 :rowsLabel="rowsPerPageLabel"
                 :rowsOptions="rowsPerPageOptions"
-                class="hidden lg:flex" 
+                :class="[isMobile ? 'hidden' : 'flex']"
             />
             <nav 
                 v-if="totalItems > itemsPerPage"
@@ -168,10 +164,14 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Showing {total} result',
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
 })
 
 // Composables
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 // States
 const itemsPerPage = ref(props.itemsPerPage)

package/composables/useIsMobile.ts

@@ -1,27 +1,32 @@
-export const useIsMobile = (breakpoint: number = 1024) => {
-    const isMobile = ref(false) // Initial value for SSR
-
-    // Function to update `isMobile`
-    const updateIsMobile = () => {
-        if (typeof window !== 'undefined') {
-            isMobile.value = window.innerWidth < breakpoint
-        }
-    }
-
-    // Attach resize listener on the client
-    onMounted(() => {
-        updateIsMobile() // Initialize the value
-        window.addEventListener('resize', updateIsMobile)
-    })
-
-    // Cleanup listener when unmounted
-    onUnmounted(() => {
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('resize', updateIsMobile)
-        }
-    })
-
-    return {
-        isMobile,
-    }
-}
+import { toValue, type MaybeRefOrGetter } from 'vue'
+
+export const useIsMobile = (breakpoint: MaybeRefOrGetter<number> = 1024) => {
+    const isMobile = ref(false) // Initial value for SSR
+
+    // Function to update `isMobile`
+    const updateIsMobile = () => {
+        if (typeof window !== 'undefined') {
+            isMobile.value = window.innerWidth < toValue(breakpoint)
+        }
+    }
+
+    // Attach resize listener on the client
+    onMounted(() => {
+        updateIsMobile() // Initialize the value
+        window.addEventListener('resize', updateIsMobile)
+    })
+
+    // Re-evaluate when the breakpoint itself changes
+    watch(() => toValue(breakpoint), updateIsMobile)
+
+    // Cleanup listener when unmounted
+    onUnmounted(() => {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', updateIsMobile)
+        }
+    })
+
+    return {
+        isMobile,
+    }
+}

package/models/enums/metrics.ts

@@ -0,0 +1,16 @@
+export enum DashboardMetricCardStyle {
+    DEFAULT = "default",
+    PRIMARY_BRAND_FILLED = "primary-brand-filled",
+    PRIMARY_BRAND_SOFT = "primary-brand-soft",
+    SECONDARY_BRAND_FILLED = "secondary-brand-filled",
+    SECONDARY_BRAND_SOFT = "secondary-brand-soft",
+    NEUTRAL_FILLED = "neutral-filled",
+    NEUTRAL_SOFT = "neutral-soft",
+    CUSTOM_FILLED = "custom-filled",
+}
+
+export enum DashboardMetricTrendDirection {
+    UP = "up",
+    DOWN = "down",
+    NEUTRAL = "neutral",
+}

package/package.json

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