@imaginario27/air-ui-ds 1.0.0

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

@@ -0,0 +1,238 @@
+<template>
+    <div 
+        :class="[ 
+            'flex', 
+            'w-full', 
+            'gap-4',
+            'justify-between',
+            'items-center',
+            'border border-border-default',
+            'px-3',
+            'py-4',
+            'rounded-lg',
+            'hover:cursor-pointer',
+            modelValue === value && selectedBackgroundColorClass,
+            disabled && 'opacity-disabled'
+        ]"
+        @click="selectRadio"
+    >
+        <!-- Radio Button with Label -->
+        <div 
+            :class="[ 
+                'flex items-center gap-3',
+                'text-sm',
+                'text-text-default'
+            ]"
+        >
+            <!-- Icon -->
+            <div 
+                :class="[
+                    'flex',
+                    'justify-center',
+                    'items-center',
+                    'w-[40px]',
+                    'h-[40px]',
+                    'rounded-full',
+                    'aspect-square',
+                    modelValue === value ? selectedIconBackgroundColorClass : 'bg-background-neutral-sublter'
+                ]"
+            >
+                <MdiIcon 
+                    :icon="icon"
+                    size="24"
+                    preserveAspectRatio="xMidYMid meet"
+                    :class="modelValue === value ? selectedIconColorClass : 'text-icon-neutral-subtle'"
+                />
+            </div>
+            <!-- Label with help text -->
+            <div class="flex flex-col gap-1.5">
+                <label 
+                    v-if="label"
+                    :for="id" 
+                    :class="[ 
+                        modelValue === value ? selectedIconColorClass : 'text-text-neutral-default',
+                        labelSizeClass, 
+                    ]" 
+                    v-html="label"
+                />
+                <!-- Help Text -->
+                <p 
+                    v-if="helpText" 
+                    :class="[ 
+                        'text-xs',
+                        'text-left', 
+                        'text-text-neutral-subtle' 
+                    ]"
+                >
+                    {{ helpText }}
+                </p>
+            </div>
+        </div>
+
+        <!-- Hidden Native Radio Button -->
+        <input 
+            :id="id" 
+            type="radio" 
+            :name="name"
+            :value="value"
+            :checked="modelValue === value" 
+            class="hidden" 
+            :disabled
+            @change="selectRadio"
+        >
+
+        <!-- Custom Radio Button -->
+        <div
+            :class="[ 
+                'w-[24px] h-[24px]', 
+                'aspect-square',
+                'border', 
+                'rounded-full', 
+                'flex items-center justify-center',
+                'transition-colors',
+                modelValue === value ? selectedCheckboxBackgroundColorClass : 'bg-neutral-white border-border-default',
+                modelValue === value && disabled && 'border-0',
+                disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+            ]"
+            @click="selectRadio"
+        >
+            <div
+                v-if="modelValue === value"
+                :class="[ 
+                    'rounded-full',
+                    'w-[50%] h-[50%]', 
+                    'bg-icon-neutral-on-filled-bg' 
+                ]"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: { 
+        type: String as PropType<string>, 
+        required: true, 
+    },
+    name: { // Group name for radio buttons
+        type: String as PropType<string>,
+        required: true,
+    },
+    value: { // Value of the radio button
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+        required: true,
+    },
+    label: String as PropType<string>,
+    helpText: String as PropType<string>,
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
+    type: {
+        type: String as PropType<
+            ColorAccent.INFO | ColorAccent.SUCCESS | ColorAccent.DANGER | ColorAccent.PRIMARY_BRAND | ColorAccent.SECONDARY_BRAND
+        >,
+        default: ColorAccent.PRIMARY_BRAND,
+        validator: (value: ColorAccent) => [
+            ColorAccent.INFO, 
+            ColorAccent.WARNING, 
+            ColorAccent.DANGER, 
+            ColorAccent.SUCCESS,
+            ColorAccent.PRIMARY_BRAND,
+            ColorAccent.SECONDARY_BRAND,
+        ].includes(value)
+    },
+    size: {
+        type: String as PropType<ControlFieldSize>,
+        default: ControlFieldSize.MD,
+        validator: (value: ControlFieldSize) => Object.values(ControlFieldSize).includes(value),
+    },
+    required: { 
+        type: Boolean as PropType<boolean>, 
+        default: false,
+    },
+    modelValue: {
+        type: [String, Number, Boolean, null] as PropType<string | number | boolean | null>,
+        default: null,
+    },
+    validator: {
+        type: Function as PropType<(value: any) => boolean>,
+        default: () => null,
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'validate'])
+
+// Computed classes
+const labelSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.MD]: 'text-sm',
+        [ControlFieldSize.LG]: 'text-base',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'text-sm'
+})
+
+const selectedBackgroundColorClass = computed(() => {
+    const colorVariant = {
+        [ColorAccent.INFO]: 'bg-background-info-subtlest',
+        [ColorAccent.WARNING]: 'bg-background-warning-subtlest',
+        [ColorAccent.DANGER]: 'bg-background-danger-subtlest',
+        [ColorAccent.SUCCESS]: 'bg-background-success-subtlest',
+        [ColorAccent.NEUTRAL]: 'bg-background-primary-brand-checked-subtlest',
+        [ColorAccent.PRIMARY_BRAND]: 'bg-background-primary-brand-checked-subtlest',
+        [ColorAccent.SECONDARY_BRAND]: 'bg-background-secondary-brand-checked-subtlest',
+    }
+    return colorVariant[props.type as ColorAccent] || 'bg-background-primary-brand-checked-subtlest'
+})
+
+const selectedIconBackgroundColorClass = computed(() => {
+    const colorVariant = {
+        [ColorAccent.INFO]: 'bg-background-info-subtlest',
+        [ColorAccent.WARNING]: 'bg-background-warning-subtle-plus',
+        [ColorAccent.DANGER]: 'bg-background-danger-subtle-plus',
+        [ColorAccent.SUCCESS]: 'bg-background-success-subtle-plus',
+        [ColorAccent.PRIMARY_BRAND]: 'bg-background-primary-brand-on-checked-subtle-bg',
+        [ColorAccent.SECONDARY_BRAND]: 'bg-background-secondary-brand-on-checked-subtle-bg',
+        [ColorAccent.NEUTRAL]: undefined,
+    }
+    return colorVariant[props.type as ColorAccent] || 'bg-background-primary-brand-on-checked-subtle-bg'
+})
+
+const selectedIconColorClass = computed(() => {
+    const colorVariant = {
+        [ColorAccent.INFO]: 'text-icon-info',
+        [ColorAccent.WARNING]: 'text-icon-warning',
+        [ColorAccent.DANGER]: 'text-icon-danger',
+        [ColorAccent.SUCCESS]: 'text-icon-success',
+        [ColorAccent.PRIMARY_BRAND]: 'text-icon-primary-brand-active',
+        [ColorAccent.SECONDARY_BRAND]: 'text-icon-secondary-brand-active',
+        [ColorAccent.NEUTRAL]: undefined,
+    }
+    return colorVariant[props.type as ColorAccent] || 'text-icon-primary-brand-active'
+})
+
+const selectedCheckboxBackgroundColorClass = computed(() => {
+    const colorVariant = {
+        [ColorAccent.INFO]: 'bg-background-info-bold',
+        [ColorAccent.WARNING]: 'bg-background-warning-bold',
+        [ColorAccent.DANGER]: 'bg-background-danger-bold',
+        [ColorAccent.SUCCESS]: 'bg-background-success-bold',
+        [ColorAccent.PRIMARY_BRAND]: 'bg-background-primary-brand-checked',
+        [ColorAccent.SECONDARY_BRAND]: 'bg-background-secondary-brand-checked',
+        [ColorAccent.NEUTRAL]: undefined,
+    }
+    return colorVariant[props.type as ColorAccent] || 'bg-background-primary-brand-checked'
+})
+
+// Handlers
+const selectRadio = () => {
+    if (props.disabled) return
+    emit('update:modelValue', props.value)
+}
+</script>

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

@@ -0,0 +1,157 @@
+<template>
+    <div :class="[ 'flex flex-col', 'w-full', 'gap-2' ]">
+        <!-- Radio Button with Label -->
+        <div 
+            :class="[ 
+                'flex items-center gap-3',
+                'text-sm',
+                'text-text-default'
+            ]"
+        >
+            <!-- Label (inverted position) -->
+            <label 
+                v-if="inverse"
+                :for="id" 
+                :class="[ 
+                    disabled && 'text-text-neutral-disabled',
+                    labelSizeClass 
+                ]" 
+                v-html="label"
+            />
+
+            <!-- Hidden Native Radio Button -->
+            <input 
+                :id="id" 
+                type="radio" 
+                :name="name"
+                :value="value"
+                :checked="modelValue === value" 
+                class="hidden" 
+                :disabled="disabled"
+                @change="selectRadio"
+            >
+            
+            <!-- Custom Radio Button -->
+            <div
+                
+                :class="[ 
+                    radioSizeClass, 
+                    'aspect-square',
+                    'border', 
+                    'rounded-full', 
+                    'flex items-center justify-center',
+                    'transition-colors',
+                    modelValue === value ? 'bg-background-primary-brand-checked' : 'bg-neutral-white border-border-default',
+                    disabled ? 'bg-background-neutral-disabled cursor-not-allowed' : 'cursor-pointer'
+                ]"
+                @click="selectRadio"
+            >
+                <div
+                    v-if="modelValue === value"
+                    :class="[ 
+                        'rounded-full',
+                        'w-[50%] h-[50%]', 
+                        disabled ? 'bg-icon-neutral-disabled' : 'bg-icon-neutral-on-filled-bg' 
+                    ]"
+                />
+            </div>
+            
+            <!-- Label (natural position) -->
+            <label 
+                v-if="!inverse"
+                :for="id" 
+                :class="[ 
+                    disabled ? 'text-text-neutral-disabled' : undefined,
+                    labelSizeClass 
+                ]"  
+                v-html="label"
+            />
+        </div>
+
+        <!-- Help Text -->
+        <p 
+            v-if="helpText" 
+            :class="[ 
+                'text-xs',
+                'text-left', 
+                'text-text-neutral-subtle'
+            ]"
+        >
+            {{ helpText }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: { 
+        type: String as PropType<string>, 
+        required: true, 
+    },
+    name: { // Group name for radio buttons
+        type: String as PropType<string>,
+        required: true,
+    },
+    value: { // Value of the radio button
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+        required: true,
+    },
+    label: { 
+        type: String as PropType<string>, 
+        default: 'Text',
+    },
+    helpText: String as PropType<string>,
+    required: { 
+        type: Boolean as PropType<boolean>, 
+        default: false,
+    },
+    modelValue: {
+        type: [String, Number, Boolean, null] as PropType<string | number | boolean | null>,
+        default: null,
+    },
+    validator: {
+        type: Function as PropType<(value: any) => boolean>,
+        default: () => null,
+    },
+    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),
+    },
+    inverse: { // Sets the radio button on the right side of the text
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'validate'])
+
+// Computed classes
+const radioSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.MD]: 'w-[24px] h-[24px]',
+        [ControlFieldSize.LG]: 'w-[32px] h-[32px]',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'w-[24px] h-[24px]'
+})
+
+const labelSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.MD]: 'text-sm',
+        [ControlFieldSize.LG]: 'text-base',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'text-sm'
+})
+
+// Handlers
+const selectRadio = () => {
+    if (props.disabled) return
+    emit('update:modelValue', props.value)
+}
+</script>

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

@@ -0,0 +1,156 @@
+<template>
+    <div class="w-full flex flex-col gap-2">
+        <!-- Label -->
+        <div 
+            v-if="label"
+            :class="[ 
+                'text-sm', 
+                'font-semibold', 
+                'text-left',
+                hasError ? 'text-text-error' : undefined  
+            ]"
+        >
+            {{ label }}
+        </div>
+        <div 
+            :class="[
+                orientation === Orientation.VERTICAL 
+                    ? 'flex flex-col gap-4' 
+                    : [
+                        'w-full',
+                        'grid gap-4',
+                        'grid-cols-1',
+                        'sm:grid-cols-2',
+                    ]
+            ]"
+        >
+            <template v-if="type === RadioType.DEFAULT">
+                <RadioField
+                    v-for="option in options" 
+                    :id="option.id.toString()"
+                    :key="option.id"
+                    v-model="selectedOption" 
+                    :name="name"
+                    :value="option.value"
+                    :label="option.label"
+                    :required="required"
+                    :helpText="option.helpText"
+                    :disabled="option.disabled"
+                    :inverse="inverse"
+                />
+            </template>
+            
+            <template v-if="type === RadioType.BUTTON">
+                <RadioButtonField
+                    v-for="option in options" 
+                    :id="option.id.toString()"
+                    :key="option.id"
+                    v-model="selectedOption" 
+                    :name="name"
+                    :value="option.value"
+                    :label="option.label"
+                    :required="required"
+                    :helpText="option.helpText"
+                    :disabled="option.disabled"
+                    :type="option.type"
+                    :icon="option.icon"
+                />
+            </template>
+        </div>
+
+        <!-- Help Text or Error Message -->
+        <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({
+    label: String,
+    name: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    options: {
+        type: Array as PropType<RadioOption[]>,
+        required: true,
+        validator: (value: RadioOption[]) =>
+            value.every((option) => option.id !== undefined && option.value !== undefined && option.label !== undefined),
+    },
+    modelValue: {
+        type: [String, Number, Boolean, null] as PropType<string | number | boolean | null>,
+        required: true,
+    },
+    validator: {
+        type: Function as PropType<(value: unknown) => string | null>,
+        default: () => null,
+    },
+    error: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    type: {
+        type: String as PropType<RadioType>,
+        default: RadioType.DEFAULT,
+        validator: (value: RadioType) => Object.values(RadioType).includes(value),
+    },
+    required: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    helpText: String as PropType<string>,
+    inverse: { // Sets the radio button on the right side of the text
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.VERTICAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+})
+
+// States
+const hasError = computed(() => props.error !== '')
+const selectedOption = computed({
+    get: () => props.modelValue,
+    set: (value) => {
+        emit('update:modelValue', value)
+        runValidation()
+    },
+})
+
+// Composables
+const validationMode = useInjectedValidationMode()
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'update:error'])
+
+// Methods
+const runValidation = () => {
+    if (!props.required || !props.validator || validationMode.value !== FormValidationMode.BLUR) return
+
+    const result = props.validator(props.modelValue)
+
+    emit('update:error', result ?? '')
+}
+
+
+// Watchers
+// Watch for changes in local selectedOption and emit upward
+watch(
+    selectedOption,
+    () => {
+        runValidation()
+    },
+)
+</script>

package/components/icons/ContainedIcon.vue

@@ -0,0 +1,130 @@
+<template>
+ <div 
+        :class="[ 
+            'flex',
+            'items-center',
+            'justify-center',
+            'rounded-full',
+            'aspect-square',
+            iconContainerClass,
+            iconContainerShapeClass,
+            iconContainerSizeClass,
+        ]"
+    >
+        <MdiIcon 
+            :icon="icon" 
+            :size="iconSizeClass"
+            preserveAspectRatio="xMidYMid meet"
+            :class="iconColorClass"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    styleType: {
+        type: String as PropType<IconContainerStyleType>,
+        default: IconContainerStyleType.FLAT,
+        validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
+    shape: {
+        type: String as PropType<IconContainerShape>,
+        default: IconContainerShape.CIRCLE,
+        validator: (value: IconContainerShape) => Object.values(IconContainerShape).includes(value),
+    },
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    size: {
+        type: String as PropType<IconContainerSize>,
+        default: IconContainerSize.XL, 
+        validator: (value: IconContainerSize) => Object.values(IconContainerSize).includes(value),
+    },
+})
+
+// Computed classes
+const iconContainerShapeClass = computed(() => {
+    const shapeVariants = {
+        [IconContainerShape.CIRCLE]: 'rounded-full',
+        [IconContainerShape.SQUARE]: 'rounded-lg',
+    }
+    return shapeVariants[props.shape as IconContainerShape] || 'rounded-full'
+})
+
+const iconContainerClass = computed(() => {
+    const filled = props.styleType === IconContainerStyleType.FILLED
+
+    const colorVariants: Record<ColorAccent, string> = {
+        [ColorAccent.NEUTRAL]: filled
+            ? 'bg-background-neutral-bold'
+            : 'bg-background-neutral-sublter',
+        [ColorAccent.SUCCESS]: filled
+            ? 'bg-background-success-bold'
+            : 'bg-background-success-subtler',
+        [ColorAccent.WARNING]: filled
+            ? 'bg-background-warning-bold'
+            : 'bg-background-warning-subtler',
+        [ColorAccent.DANGER]: filled
+            ? 'bg-background-danger-bold'
+            : 'bg-background-danger-subtler',
+        [ColorAccent.INFO]: filled
+            ? 'bg-background-info-bold'
+            : 'bg-background-info-subtler',
+        [ColorAccent.PRIMARY_BRAND]: filled
+            ? 'bg-background-primary-brand-default'
+            : 'bg-background-primary-brand-soft',
+        [ColorAccent.SECONDARY_BRAND]: filled
+            ? 'bg-background-secondary-brand-default'
+            : 'bg-background-secondary-brand-soft',
+    }
+
+    return colorVariants[props.color as ColorAccent] || (filled
+        ? 'bg-background-neutral-bold'
+        : 'bg-background-neutral-sublter')
+})
+
+const iconColorClass = computed(() => {
+    if (props.styleType === IconContainerStyleType.FILLED) return 'text-icon-neutral-on-filled-bg'
+
+    const iconVariants = {
+        [ColorAccent.NEUTRAL]: 'text-icon-neutral-subtle-on-subtler-bg',
+        [ColorAccent.SUCCESS]: 'text-icon-success',
+        [ColorAccent.WARNING]: 'text-icon-warning-on-bg',
+        [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 iconVariants[props.color as ColorAccent] || 'text-icon-neutral-subtle-on-subtler-bg'
+
+})
+
+const iconContainerSizeClass = computed(() => {
+    const sizeVariants = {
+        [IconContainerSize.LG]: 'w-[40px] h-[40px]',
+        [IconContainerSize.XL]: 'w-[48px] h-[48px]',
+        [IconContainerSize.XXL]: 'w-[56px] h-[56px]',
+        [IconContainerSize.XXXL]: 'w-[80px] h-[80px]',
+    }
+
+    return sizeVariants[props.size as IconContainerSize] || 'w-[48px] h-[48px]'
+})
+
+const iconSizeClass = computed(() => {
+    const sizeVariants = {
+        [IconContainerSize.LG]: '24',
+        [IconContainerSize.XL]: '24',
+        [IconContainerSize.XXL]: '40',
+        [IconContainerSize.XXXL]: '48',
+    }
+
+    return sizeVariants[props.size as IconContainerSize] || '24'
+})
+    
+</script>