@imaginario27/air-ui-ds 1.0.23 → 1.1.1

package/components/empty-states/EmptyState.vue

@@ -11,16 +11,15 @@
             ]"
         >
             <!-- Icon -->
-            <MdiIcon
+            <Icon 
                 v-if="icon"
-                :icon="icon"
-                :size="iconSize"
-                preserveAspectRatio="xMidYMid meet"
-                :class="[
+                :name="icon"
+                :iconClass="[
                     hasContainer ? isContainedIconClass : iconClass,
                     iconSizeClass,
                 ]"
             />
+  
             <div 
                 :class="[
                     'flex gap-2 flex-col',
@@ -68,8 +67,8 @@ const props = defineProps({
     },
     description: String as PropType<string>,
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiDatabaseAlertOutline',
+        type: String as PropType<string>,
+        default: 'mdi:database-alert-outline',
     },
     iconClass: {
         type: String as PropType<string>,
@@ -87,7 +86,10 @@ const props = defineProps({
     },
     buttonText: String as PropType<string>,
     buttonIconPosition: String as PropType<IconPosition>,
-    buttonIcon: String as PropType<any>,
+    buttonIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:plus',
+    },
     buttonStyleType: {
         type: String as PropType<ButtonStyleType>,
         default: ButtonStyleType.PRIMARY_BRAND_FILLED
@@ -119,20 +121,12 @@ const orientationClass = computed(() => {
     return orientationVariant[props.orientation as Orientation] || 'flex-col gap-3 sm:flex-row sm:gap-3'
 })
 
-const iconSize = computed(() => {
-    const iconSize = {
-        [Orientation.VERTICAL]: '40px',
-        [Orientation.HORIZONTAL]: '32px',
-    }
-    return iconSize[props.orientation as Orientation] || '32px'
-})
-
 const iconSizeClass = computed(() => {
     const iconSize = {
-        [Orientation.VERTICAL]: 'min-w-[40px] max-w-[40px]',
-        [Orientation.HORIZONTAL]: 'min-w-[32px] max-w-[32px]',
+        [Orientation.VERTICAL]: '!min-w-[40px] !max-w-[40px]',
+        [Orientation.HORIZONTAL]: '!min-w-[32px] !max-w-[32px]',
     }
-    return iconSize[props.orientation as Orientation] || 'min-w-[32px] max-w-[32px]'
+    return iconSize[props.orientation as Orientation] || '!min-w-[32px] max-w-[32px]'
 })
 
 const containerClasses = computed(() => {
@@ -149,22 +143,22 @@ const containerClasses = computed(() => {
 
 const customContainerClass = computed(() => {
     const variant = {
-        [EmptyPlaceholderContainerStyle.DASHED]: 'border-2 border-dashed border-border-default',
-        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: 'bg-background-neutral-subtlest',
-        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: 'bg-background-primary-brand-soft',
+        [EmptyPlaceholderContainerStyle.DASHED]: '!border-2 border-dashed border-border-default',
+        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: '!bg-background-neutral-subtlest',
+        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: '!bg-background-primary-brand-soft',
 
     }
-    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || 'bg-background-neutral-subtlest'
+    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || '!bg-background-neutral-subtlest'
 })
 
 const isContainedIconClass = computed(() => {
     const variant = {
-        [EmptyPlaceholderContainerStyle.DASHED]: 'text-icon-neutral-subtlest',
-        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: 'text-icon-neutral-on-subtlest-bg',
-        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: 'text-icon-neutral-on-primary-brand-soft-bg',
+        [EmptyPlaceholderContainerStyle.DASHED]: '!text-icon-neutral-subtlest',
+        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: '!text-icon-neutral-on-subtlest-bg',
+        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: '!text-icon-neutral-on-primary-brand-soft-bg',
 
     }
-    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || 'text-icon-neutral-on-subtlest-bg'
+    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || '!text-icon-neutral-on-subtlest-bg'
 })
 
 </script>

package/components/features/Feature.vue

@@ -1,26 +1,13 @@
 <template>
     <div class="flex gap-2.5">
-        <div v-if="icon">
-            <MdiIcon
-                v-if="icon && !svgIcon"
-                :icon
-                preserveAspectRatio="xMidYMid meet"
-                :class="[
-                    'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
-                    iconColorClass,
-                ]"
-            />
-            <span
-                v-else-if="svgIcon"
-                class="w-[24px] h-[24px] min-w-[24px] min-h-[24px]"
-            >
-                <SVGImage
-                    :src="svgIcon"
-                    :color="resolvedSvgIconColor?.value"
-                />
-            </span>
-        </div>
-
+        <Icon
+            v-if="icon"
+            :name="icon"
+            :size="IconSize.LG"
+            :color="iconColor"
+            :iconClass="iconClass"
+        />
+    
         <div class="w-full flex flex-col gap-1">
             <div class="text-base font-semibold">
                 {{ title }}
@@ -36,42 +23,18 @@
 </template>
 <script setup lang="ts">
 // Props
-const props = defineProps({
+defineProps({
     title: {
         type: String as PropType<string>,
         default: 'Title',
     },
     description: String as PropType<string>,
-    icon: String as PropType<any>,
+    icon: String as PropType<string>,
     iconColor: {
         type: String as PropType<ColorAccent>,
         default: ColorAccent.SECONDARY_BRAND, 
         validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
     },
-    svgIcon: String as PropType<string>,
-    useSVGIconColor: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
-})
-
-// Computed functions
-const resolvedSvgIconColor = computed(() => {
-    return props.useSVGIconColor ? undefined : iconColorClass
-})
-
-// Class
-const iconColorClass = computed(() => {
-    const variant = {
-        [ColorAccent.NEUTRAL]: "text-icon-neutral-subtle",
-        [ColorAccent.SUCCESS]: "text-icon-success",
-        [ColorAccent.WARNING]:  "text-icon-warning",
-        [ColorAccent.DANGER]: "text-icon-danger",
-        [ColorAccent.INFO]: "text-icon-info",
-        [ColorAccent.PRIMARY_BRAND]: "text-icon-primary-brand-default",
-        [ColorAccent.SECONDARY_BRAND]: "text-icon-secondary-brand-default",
-    }
-    return variant[props.iconColor as ColorAccent] || 'text-icon-secondary-brand-default"'
+    iconClass: String as PropType<string>,
 })
-
 </script>

package/components/forms/fields/ButtonField.vue

@@ -22,8 +22,6 @@
             :loadingText
             :styleType
             :actionType
-            :svgIcon
-            :useSVGIconColor
             :isRounded
             :isFullWidth
             :isMobileFullWidth
@@ -62,19 +60,14 @@ const props = defineProps({
         validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     iconPosition: {
         type: String as PropType<IconPosition>,
         default: IconPosition.NONE,
         validator: (value: IconPosition) => Object.values(IconPosition).includes(value),
     },
-    svgIcon: String as PropType<string>,
-    useSVGIconColor: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/forms/fields/CheckboxField.vue

@@ -54,12 +54,13 @@
                 ]"
                 @click="toggleCheckbox"
             >
-                <MdiIcon 
+                <Icon
                     v-if="modelValue" 
-                    icon="mdiCheckBold" 
-                    :size="checkboxIconSizeClass" 
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="disabled ? 'text-icon-neutral-disabled' : 'text-icon-neutral-on-filled-bg'"
+                    name="mdi:check-bold" 
+                    :iconClass="[
+                        checkboxIconSizeClass,
+                        disabled ? '!text-icon-neutral-disabled' : '!text-icon-neutral-on-filled-bg'
+                    ]"
                 />
             </div>
             
@@ -153,10 +154,10 @@ const controlFieldSizeClass = computed(() => {
 
 const checkboxIconSizeClass = computed(() => {
     const sizeVariant = {
-        [ControlFieldSize.MD]: '16',
-        [ControlFieldSize.LG]: '20',
+        [ControlFieldSize.MD]: '!w-[16px] !h-[16px] !min-w-[16px] !min-h-[16px]',
+        [ControlFieldSize.LG]: '!w-[20px] !h-[20px] !min-w-[20px] !min-h-[20px]',
     }
-    return sizeVariant[props.size as ControlFieldSize] || '16'
+    return sizeVariant[props.size as ControlFieldSize] || '!w-[16px] !h-[16px] !min-w-[16px] !min-h-[16px]'
 })
 
 const labelSizeClass = computed(() => {

package/components/forms/fields/DataField.vue

@@ -35,7 +35,7 @@
 
                     <ActionIconButton 
                         v-if="hasCopyToClipboardButton"
-                        icon="mdiContentCopy"
+                        icon="mdi:content-copy"
                         :size="ButtonSize.XS"
                         @click="handleCopyToClipboard"
                     />

package/components/forms/fields/FileUploadField.vue

@@ -48,10 +48,10 @@
                     @error="handleError"
                 >
                     <template #placeholder-img>
-                        <MdiIcon
-                            :icon="icon"
-                            preserveAspectRatio="xMidYMid meet"
-                            class="min-w-[40px] min-h-[40px] aspect-square text-icon-default"
+                        <Icon 
+                            name="mdi:cloud-upload-outline"
+                            :size="IconSize.XXL"
+                            :color="ColorAccent.NEUTRAL"
                         />
                     </template>
                     <template #title>
@@ -109,8 +109,8 @@ const props = defineProps({
     },
     helpText: String as PropType<string>,
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiUploadOutline',
+        type: String as PropType<string>,
+        default: 'mdi:cloud-upload-outline',
     },
     buttonText: String as PropType<string>,
     upToText: {

package/components/forms/fields/InputField.vue

@@ -42,16 +42,11 @@
             ]"
         >
             <!-- Icon -->
-            <span
+            <Icon
                 v-if="icon"
-                class="text-icon-neutral-subtler"
-            >
-                <MdiIcon
-                    :icon="icon"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
-                />
-            </span>
+                :name="icon"
+                iconClass="text-icon-neutral-subtler"
+            />
 
             <!-- Input -->
             <input
@@ -98,13 +93,13 @@
                     'focus:outline-none',
                     'transition-colors',
                     'cursor-pointer',
+                    'h-[20px]'
                 ]"
                 @click="handleSuffixClick"
             >
-                <MdiIcon
-                    :icon="suffixIcon"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    v-if="suffixIcon"
+                    :name="suffixIcon"  
                 />
             </button>
 
@@ -118,27 +113,21 @@
                     'focus:outline-none',
                     'transition-colors',
                     'cursor-pointer',
+                    'h-[20px]'
                 ]"
                 @click="() => showPassword = !showPassword"
             >
-                <MdiIcon
-                    :icon="showPassword ? 'mdiEyeOffOutline' : 'mdiEyeOutline'"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    :name="showPassword ? 'mdi:eye-off-outline' : 'mdi:eye-outline'"
                 />
             </button>
 
             <!-- Error Icon -->
-            <span
+            <Icon
                 v-if="hasError && !suffixIcon"
-                class="text-icon-error"
-            >
-                <MdiIcon
-                    icon="mdiAlertCircle"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
-                />
-            </span>
+                name="mdi:alert-circle-outline"
+                iconClass="text-icon-error"
+            />
         </div>
 
         <!-- Help Text -->
@@ -171,8 +160,8 @@ const props = defineProps({
         default: 'Placeholder',
     },
     helpText: String as PropType<string>,
-    icon: String as PropType<any>,
-    suffixIcon: String as PropType<any>,
+    icon: String as PropType<string>,
+    suffixIcon: String as PropType<string>,
     linkText: String as PropType<string>,
     linkUrl: String as PropType<string>,       
     size: {

package/components/forms/fields/RepeaterField.vue

@@ -19,7 +19,7 @@
                 <ActionIconButton
                     v-if="index === items.length - 1"
                     :styleType="ButtonStyleType.NEUTRAL_OUTLINED"
-                    icon="mdiPlusCircleOutline"
+                    icon="mdi:plus-circle-outline"
                     :size="ButtonSize.SM"
                     @click="addItem"
                 />
@@ -28,7 +28,7 @@
                 <ActionIconButton
                     v-if="items.length > 1"
                     :styleType="ButtonStyleType.DELETE_SOFT"
-                    icon="mdiMinusCircleOutline"
+                    icon="mdi:minus-circle-outline"
                     :size="ButtonSize.SM"
                     @click="removeItem(index)"
                 />

package/components/forms/fields/SearchField.vue

@@ -38,13 +38,10 @@
             ]"
         >
             <!-- Icon -->
-            <span class="text-icon-neutral-subtler">
-                <MdiIcon 
-                    :icon
-                    size="20" 
-                    preserveAspectRatio="xMidYMid meet"
-                />
-            </span>
+            <Icon
+                :name="icon"
+                iconClass="text-icon-neutral-subtler"
+            />
 
             <!-- Input -->
             <input 
@@ -73,7 +70,7 @@
                 v-if="filled"
                 :size="ButtonSize.SM"
                 :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
-                icon="mdiCloseCircle"
+                icon="mdi:close-circle"
                 @click="clearField"
             />
         </div>
@@ -101,8 +98,8 @@ const props = defineProps({
     },
     helpText: String as PropType<string>,
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiMagnify',
+        type: String as PropType<string>,
+        default: 'mdi:magnify',
     },
     size: {
         type: String as PropType<InputSize>,

package/components/forms/fields/SliderField.vue

@@ -69,7 +69,7 @@
                                 'transition-all duration-200',
                                 disabled 
                                     ? 'opacity-50 cursor-not-allowed' 
-                                    : 'hover:bg-background-neutral-sublter hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
+                                    : 'hover:bg-background-neutral-subtler hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
                                 'focus:outline-none focus:ring-2 focus:ring-primary-brand-200'
                             ]"
                             @click="startEditing(0)"
@@ -79,11 +79,10 @@
                             <span>
                                 {{ `${currentValuePrefix || ''}${(modelValue as [number, number])[0]}${currentValueSuffix || ''}` }}
                             </span>
-                            <MdiIcon 
-                                icon="mdiPencil" 
-                                size="14px" 
-                                preserveAspectRatio="xMidYMid meet"
-                                class="ml-1 opacity-60"
+                            <Icon
+                                name="mdi:pencil"
+                                :size="IconSize.SM"
+                                iconClass="ml-1 opacity-60"
                             />
                         </button>
                         
@@ -167,7 +166,7 @@
                                 'transition-all duration-200',
                                 disabled 
                                     ? 'opacity-50 cursor-not-allowed' 
-                                    : 'hover:bg-background-neutral-sublter hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
+                                    : 'hover:bg-background-neutral-subtler hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
                                 'focus:outline-none focus:ring-2 focus:ring-primary-brand-200'
                             ]"
                             @click="startEditing(1)"
@@ -175,11 +174,10 @@
                             @keydown.space.prevent="startEditing(1)"
                         >
                             <span>{{ `${currentValuePrefix || ''}${(modelValue as [number, number])[1]}${currentValueSuffix || ''}` }}</span>
-                            <MdiIcon 
-                                icon="mdiPencil" 
-                                size="14px" 
-                                preserveAspectRatio="xMidYMid meet"
-                                class="ml-1 opacity-60"
+                            <Icon
+                                name="mdi:pencil"
+                                :size="IconSize.SM"
+                                iconClass="ml-1 opacity-60"
                             />
                         </button>
                     </div>
@@ -231,7 +229,7 @@
                                 'transition-all duration-200',
                                 disabled 
                                     ? 'opacity-50 cursor-not-allowed' 
-                                    : 'hover:bg-background-neutral-sublter hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer hover:shadow-sm',
+                                    : 'hover:bg-background-neutral-subtler hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer hover:shadow-sm',
                                 'focus:outline-none focus:ring-2 focus:ring-primary-brand-200'
                             ]"
                             @click="startEditing(0)"
@@ -241,11 +239,10 @@
                             <span>
                                 {{ `${currentValuePrefix || ''}${modelValue}${currentValueSuffix || ''}` }}
                             </span>
-                            <MdiIcon 
-                                icon="mdiPencil" 
-                                size="14px" 
-                                preserveAspectRatio="xMidYMid meet"
-                                :class="[
+                            <Icon
+                                name="mdi:pencil"
+                                :size="IconSize.SM"
+                                :iconClass="[
                                     'ml-1',
                                     'opacity-60',
                                     'group-hover:opacity-100',
@@ -309,7 +306,7 @@
                     'left-0',
                     'w-full',
                     'h-[4px]',
-                    'bg-background-neutral-sublter',
+                    'bg-background-neutral-subtler',
                     'rounded-full',
                     '-translate-y-1/2',
                 ]"

package/components/forms/fields/SwitchField.vue

@@ -22,7 +22,7 @@
         <div 
             :class="[ 
                 'flex items-center gap-3',
-                label || icon || customIcon ? 'justify-between' : 'justify-end',
+                label || icon ? 'justify-between' : 'justify-end',
                 'text-sm w-full',
                 hasError ? 'text-text-error' : 'text-text-default',
                 checkboxWrapperClass && checkboxWrapperClass
@@ -30,27 +30,15 @@
         >
             <!-- Label + Icon block (only if present) -->
             <div 
-                v-if="label || icon || customIcon"
+                v-if="label || icon"
                 class="flex gap-2.5 w-full"
             >
                 <!-- Icon -->
-                <template v-if="icon || customIcon">
-                    <MdiIcon 
-                        v-if="icon && !customIcon" 
-                        :icon="icon" 
-                        :size="iconSize" 
-                        preserveAspectRatio="xMidYMid meet"
-                        class="text-icon-default" 
-                    />
-                    <div
-                        v-else
-                        :class="[
-                            customIconSizeClass,
-                            'text-icon-default'
-                        ]"
-                        v-html="customIcon" 
-                    />
-                </template>
+                <Icon
+                    v-if="icon"
+                    :name="icon"
+                    :iconClass="iconSizeClass" 
+                />
 
                 <!-- Label -->
                 <label 
@@ -59,7 +47,6 @@
                     :class="[
                         disabled && 'text-text-neutral-disabled',
                         labelSizeClass,
-                        customIcon && 'mt-1',
                         labelClass && labelClass
                     ]" 
                     v-html="label"
@@ -151,8 +138,7 @@ const props = defineProps({
         default: ControlFieldSize.MD,
         validator: (value: ControlFieldSize) => Object.values(ControlFieldSize).includes(value),
     },
-    icon: String as PropType<any>,
-    customIcon: String as PropType<any>,
+    icon: String as PropType<string>,
     styleType: {
         type: String as PropType<SwitchStyle>,
         default: SwitchStyle.BRAND,
@@ -196,20 +182,12 @@ const labelSizeClass = computed(() => {
     return sizeVariant[props.size as ControlFieldSize] || 'text-sm'
 })
 
-const iconSize = computed(() => {
-    const sizeVariant = {
-        [ControlFieldSize.MD]: '20',
-        [ControlFieldSize.LG]: '24',
-    }
-    return sizeVariant[props.size as ControlFieldSize] || '20'
-})
-
-const customIconSizeClass = computed(() => {
+const iconSizeClass = computed(() => {
     const sizeVariant = {
-        [ControlFieldSize.MD]: 'w-[20px] h-[20px]',
-        [ControlFieldSize.LG]: 'w-[24px] h-[24px]',
+        [ControlFieldSize.MD]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [ControlFieldSize.LG]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
     }
-    return sizeVariant[props.size as ControlFieldSize] || 'w-[20px] h-[20px]'
+    return sizeVariant[props.size as ControlFieldSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
 const checkedBackgroundClass = computed(() => {

package/components/forms/fields/TextareaField.vue

@@ -54,11 +54,13 @@
             />
 
             <!-- Error Icon -->
-            <span v-if="hasError" class="text-icon-error absolute top-4 right-4">
-                <MdiIcon 
-                    icon="mdiAlertCircle" 
-                    size="20" 
-                    preserveAspectRatio="xMidYMid meet"
+            <span 
+                v-if="hasError" 
+                class="absolute top-4 right-4"
+            >
+                <Icon
+                    name="mdi:alert-circle"
+                    iconClass="text-icon-error"
                 />
             </span>
         </div>

package/components/forms/fields/radio/RadioButtonField.vue

@@ -37,11 +37,10 @@
                     modelValue === value ? selectedIconBackgroundColorClass : 'bg-background-neutral-sublter'
                 ]"
             >
-                <MdiIcon 
-                    :icon="icon"
-                    size="24"
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="modelValue === value ? selectedIconColorClass : 'text-icon-neutral-subtle'"
+                <Icon
+                    :name="icon"
+                    :size="IconSize.LG"
+                    :iconClass="modelValue === value ? selectedIconColorClass : 'text-icon-neutral-subtle'"
                 />
             </div>
             <!-- Label with help text -->
@@ -126,8 +125,8 @@ const props = defineProps({
         required: true,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     type: {
         type: String as PropType<