@imaginario27/air-ui-ds 1.12.2 → 1.13.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.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/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.0",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",