@imaginario27/air-ui-ds 1.4.7 → 1.6.0

package/CHANGELOG.md

@@ -5,7 +5,18 @@ 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.4.6 - 2026-03-21
+## 1.5.0 - 2026-03-23
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. add new standalone checkbox component and fixes style issues ([560de2b](https://github.com/imaginario27/air-ui/commit/560de2b7f700565c087790c1eb3c581c0b782ba9))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.4.7 - 2026-03-21
 
 Release type: patch.
 Commits found in range: 1.

package/components/forms/Checkbox.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <input
+            :id="id"
+            type="checkbox"
+            :checked="modelValue"
+            class="hidden"
+            :disabled="disabled"
+            @change="handleNativeChange"
+        >
+
+        <div
+            :class="[
+                'flex items-center justify-center',
+                controlFieldSizeClass,
+                'border',
+                'rounded',
+                'transition-colors',
+                modelValue ? 'bg-background-primary-brand-checked border-border-primary-brand-active' : 'bg-neutral-white border-border-default',
+                disabled ? 'bg-background-neutral-disabled cursor-not-allowed' : 'cursor-pointer'
+            ]"
+            @click="toggleCheckbox"
+        >
+            <Icon
+                v-if="modelValue"
+                name="mdi:check-bold"
+                :iconClass="[
+                    checkboxIconSizeClass,
+                    disabled ? '!text-icon-neutral-disabled' : '!text-icon-neutral-on-filled-bg'
+                ]"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    id: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    size: {
+        type: String as PropType<ControlFieldSize>,
+        default: ControlFieldSize.MD,
+        validator: (value: ControlFieldSize) => Object.values(ControlFieldSize).includes(value),
+    },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const controlFieldSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.XS]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [ControlFieldSize.SM]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [ControlFieldSize.MD]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [ControlFieldSize.LG]: 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
+})
+
+const checkboxIconSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.XS]: '!w-[12px] !h-[12px] !min-w-[12px] !min-h-[12px]',
+        [ControlFieldSize.SM]: '!w-[14px] !h-[14px] !min-w-[14px] !min-h-[14px]',
+        [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] || '!w-[16px] !h-[16px] !min-w-[16px] !min-h-[16px]'
+})
+
+const toggleCheckbox = () => {
+    if (props.disabled) return
+
+    emit('update:modelValue', !props.modelValue)
+}
+
+const handleNativeChange = () => {
+    if (props.disabled) return
+
+    emit('update:modelValue', !props.modelValue)
+}
+</script>

package/components/forms/fields/CheckboxField.vue

@@ -30,39 +30,13 @@
                 v-html="label"
             />
 
-            <!-- Hidden Native Checkbox -->
-            <input 
-                :id="id" 
-                type="checkbox" 
-                :checked="modelValue" 
-                class="hidden" 
+            <Checkbox
+                :id="id"
+                :modelValue="modelValue"
                 :disabled="disabled"
-                @change="handleChange"
-            >
-            
-            <!-- Custom Checkbox -->
-            <div
-                :class="[ 
-                    'flex items-center justify-center',
-                    controlFieldSizeClass, 
-                    'border', 
-                    'rounded', 
-                    'flex items-center justify-center',
-                    'transition-colors',
-                    modelValue ? 'bg-background-primary-brand-checked border-border-primary-brand-active' : 'bg-neutral-white border-border-default',
-                    disabled ? 'bg-background-neutral-disabled cursor-not-allowed' : 'cursor-pointer'
-                ]"
-                @click="toggleCheckbox"
-            >
-                <Icon
-                    v-if="modelValue" 
-                    name="mdi:check-bold" 
-                    :iconClass="[
-                        checkboxIconSizeClass,
-                        disabled ? '!text-icon-neutral-disabled' : '!text-icon-neutral-on-filled-bg'
-                    ]"
-                />
-            </div>
+                :size="size"
+                @update:modelValue="handleCheckboxUpdate"
+            />
             
             <!-- Label (natural position) -->
             <label 
@@ -144,24 +118,10 @@ const validationMode = useInjectedValidationMode()
 const hasError = computed(() => props.error !== '')
 
 // Computed classes
-const controlFieldSizeClass = computed(() => {
-    const sizeVariant = {
-        [ControlFieldSize.MD]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
-        [ControlFieldSize.LG]: 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]',
-    }
-    return sizeVariant[props.size as ControlFieldSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
-})
-
-const checkboxIconSizeClass = computed(() => {
-    const sizeVariant = {
-        [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] || '!w-[16px] !h-[16px] !min-w-[16px] !min-h-[16px]'
-})
-
 const labelSizeClass = computed(() => {
     const sizeVariant = {
+        [ControlFieldSize.XS]: 'text-xs',
+        [ControlFieldSize.SM]: 'text-sm',
         [ControlFieldSize.MD]: 'text-sm',
         [ControlFieldSize.LG]: 'text-base',
     }
@@ -169,20 +129,14 @@ const labelSizeClass = computed(() => {
 })
 
 // Handlers
-const handleChange = () => {
-    if (validationMode.value === FormValidationMode.BLUR) {
-        runValidation()
-    }
-}
-
-const toggleCheckbox = () => {
+const handleCheckboxUpdate = (value: boolean) => {
     if (props.disabled) return
 
     if (validationMode.value === FormValidationMode.BLUR) {
         runValidation()
     }
 
-    emit('update:modelValue', !props.modelValue)
+    emit('update:modelValue', value)
 }
 
 const runValidation = () => {

package/components/forms/fields/SelectField.vue

@@ -33,7 +33,6 @@
             :modelValue 
             :options 
             :type 
-            :borderClass="hasError ? 'border border-border-error text-text-error' : 'border border-border-default'"
             :placeholder="computedPlaceholder"
             :size
             :activeStyle
@@ -47,7 +46,7 @@
             :allowDeselect
             :isLoading="isLoadingOptions"
             :loadingText
-            :selectBoxClass
+            :selectBoxClass="computedSelectBoxClass"
             @update:modelValue="handleValueUpdate"
         />
 
@@ -186,6 +185,12 @@ const computedPlaceholder = computed(() => {
     return props.placeholder
 })
 
+const computedSelectBoxClass = computed(() => {
+    const errorClass = hasError.value ? 'border-border-error text-text-error' : ''
+
+    return [errorClass, props.selectBoxClass].filter(Boolean).join(' ')
+})
+
 // Handlers
 const handleValueUpdate = (newValue: string | number | (string | number)[] | null) => {
     if (props.allowDeselect && !props.multiple) {

package/components/forms/fields/SlotField.vue

@@ -0,0 +1,70 @@
+<template>
+    <div :class="['flex flex-col', 'w-full', 'gap-2']">
+        <!-- Label -->
+        <label 
+            v-if="label" 
+            :for="id" 
+                :class="[
+                'text-sm',
+                'font-semibold',
+                'text-left',
+                hasError && 'text-text-error',
+            ]"
+        >
+            {{ label }}
+        </label>
+
+        <!-- Slot container -->
+        <div 
+            :id
+            :class="[disabled && 'cursor-not-allowed opacity-disabled']"
+        >
+            <slot 
+                :id
+                :error
+                :hasError 
+                :helpText
+                :disabled
+                :required
+            />
+        </div>
+
+        <!-- Help / Error -->
+        <p 
+            v-if="hasError || helpText" 
+            :class="[
+                'text-xs text-left',
+                hasError ? 'text-text-error' : 'text-text-neutral-subtle',
+            ]"
+        >
+            {{ hasError ? error : helpText }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    label: String as PropType<string>,
+    helpText: String as PropType<string>,
+    error: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    required: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Computed
+const hasError = computed(() => props.error !== '')
+</script>

package/components/icons/ContainedIcon.vue

@@ -14,7 +14,8 @@
         <Icon
             :name="icon"
             :mode
-            :iconClass="[iconSizeClass, iconColorClass]"
+            :iconClass="finalIconClass"
+            v-bind="iconSizeProps"
         />
     </div>
 </template>
@@ -50,6 +51,10 @@ const props = defineProps({
         default: IconContainerSize.XL, 
         validator: (value: IconContainerSize) => Object.values(IconContainerSize).includes(value),
     },
+    iconSize: {
+        type: String as PropType<IconSize>,
+        validator: (value: IconSize) => Object.values(IconSize).includes(value),
+    },
 })
 
 // Computed classes
@@ -130,4 +135,14 @@ const iconSizeClass = computed(() => {
 
     return sizeVariants[props.size as IconContainerSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
 })
+
+const finalIconClass = computed(() => props.iconSize
+    ? [iconColorClass.value]
+    : [iconSizeClass.value, iconColorClass.value]
+)
+
+const iconSizeProps = computed(() => (props.iconSize
+    ? { size: props.iconSize }
+    : {}
+))
 </script>

package/models/enums/formFields.ts

@@ -1,4 +1,6 @@
 export enum ControlFieldSize {
+    XS = 'xs',
+    SM = 'sm',
     MD = 'md',
     LG = 'lg',
 }

package/package.json

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