@imaginario27/air-ui-ds 1.0.0

package/components/popovers/Popover.vue

@@ -0,0 +1,128 @@
+<template>
+    <div
+        ref="popoverContainer"
+        class="relative popover-container"
+    >
+        <Transition
+            :enter-from-class="transitionEnterFromClass"
+            :leave-to-class="transitionLeaveToClass"
+            enter-active-class="transition ease-out duration-200"
+            leave-active-class="transition ease-in duration-150"
+            enter-to-class="opacity-100 translate-y-0"
+            leave-from-class="opacity-100 translate-y-0"
+        >
+            <Card
+                v-if="isOpen"
+                :class="[
+                    'absolute',
+                    'z-10',
+                    position === Position.TOP ? 'bottom-full mb-2' : 'top-full mt-2',
+                    alignClass,
+                    popoverClass,
+                    '!shadow-md'
+                ]"
+            >
+                <CardBody>
+                    <slot 
+                        name="content"
+                        :onClose="toggle"
+                    />
+                </CardBody>  
+            </Card>
+        </Transition>
+
+        <!-- Activator -->
+        <div
+            class="popover-activator"
+            @click="handleClick"
+            @mouseenter="handleMouseEnter"
+            @mouseleave="handleMouseLeave"
+        >
+            <slot 
+                name="activator"
+                :onClick="toggle"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    position: {
+        type: String as PropType<Position>,
+        default: Position.TOP,
+        validator: (value: Position) => Object.values(Position).includes(value),
+    },
+    align: {
+        type: String as PropType<Align>,
+        default: Align.CENTER,
+        validator: (value: Align) => Object.values(Align).includes(value),
+    },
+    trigger: {
+        type: String as PropType<Trigger>,
+        default: Trigger.HOVER,
+        validator: (value: Trigger) => Object.values(Trigger).includes(value),
+    },
+    popoverClass: {
+        type: String as PropType<string>,
+        default: 'min-w-[300px]'
+    }
+})
+
+// Computed classes
+const alignClass = computed(() => {
+    const alignVariant: Record<Align, string> = {
+        [Align.LEFT]: "left-0",
+        [Align.CENTER]: "left-1/2 -translate-x-1/2",
+        [Align.RIGHT]: "right-0",
+    }
+
+    return alignVariant[props.align as Align] || "left-1/2 -translate-x-1/2"
+})
+
+const transitionEnterFromClass = computed(() => {
+    return props.position === Position.TOP
+        ? 'opacity-0 translate-y-2'
+        : 'opacity-0 -translate-y-2'
+})
+
+const transitionLeaveToClass = computed(() => {
+    return props.position === Position.TOP
+        ? 'opacity-0 translate-y-2'
+        : 'opacity-0 -translate-y-2'
+})
+
+// Refs
+const popoverContainer = ref(null)
+
+// Composables
+const [isOpen, toggle] = useToggle(false)
+let hoverTimeout: ReturnType<typeof setTimeout>
+
+onClickOutside(popoverContainer, () => {
+    isOpen.value = false
+})
+
+// Handlers
+const handleClick = () => {
+    if (props.trigger === Trigger.CLICK) {
+        toggle()
+    }
+}
+
+const handleMouseEnter = () => {
+    if (props.trigger === Trigger.HOVER) {
+        clearTimeout(hoverTimeout)
+        isOpen.value = true
+    }
+}
+
+const handleMouseLeave = () => {
+    if (props.trigger === Trigger.HOVER) {
+        hoverTimeout = setTimeout(() => {
+            isOpen.value = false
+        }, 200)
+    }
+}
+</script>

package/components/rating/InteractiveRating.vue

@@ -0,0 +1,94 @@
+<template>
+    <div
+        class="flex gap-1"
+        @mouseleave="hoverIndex = null"
+    >
+        <RatingItem
+            v-for="(icon, index) in items"
+            :key="index"
+            :icon="icon"
+            :size="size"
+            :color="color"
+            isInteractive
+            @click="handleClick(index)"
+            @mouseenter="onMouseEnter(index)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        required: true
+    },
+    size: {
+        type: String as PropType<RatingItemSize>,
+        default: RatingItemSize.SM,
+        validator: (value: RatingItemSize) => Object.values(RatingItemSize).includes(value),
+    },
+    color: {
+        type: String as PropType<RatingItemColor>,
+        default: RatingItemColor.GOLD,
+        validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
+    },
+    emptyIndicatorIcon: {
+        type: String as PropType<any>,
+        default: 'mdiStarOutline'
+    },
+    halfIndicatorIcon: {
+        type: String as PropType<any>,
+        default: 'mdiStarHalfFull'
+    },
+    fullIndicatorIcon: {
+        type: String as PropType<any>,
+        default: 'mdiStar'
+    },
+    hoverPreview: {
+        type: Boolean,
+        default: true
+    }
+})
+
+// States
+const hoverIndex = ref<number | null>(null)
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Handlers
+const onMouseEnter = (index: number) => {
+    if (props.hoverPreview) {
+        hoverIndex.value = index
+    }
+}
+
+const handleClick = (index: number) => {
+    const clickedValue = index + 1
+
+    if (clickedValue === props.modelValue) {
+        emit('update:modelValue', 0)
+    } else {
+        emit('update:modelValue', clickedValue)
+    }
+}
+
+// Computed
+// Get the value to render: either hover preview or actual value
+const displayValue = computed(() => {
+    if (props.hoverPreview && hoverIndex.value !== null)
+        return hoverIndex.value + 1
+
+    if (!isFinite(props.modelValue) || isNaN(props.modelValue))
+        return 0
+
+    return Math.min(5, Math.max(0, Math.round(props.modelValue * 2) / 2))
+})
+
+const items = computed(() => getRatingIndicator(
+    displayValue.value, 
+    props.emptyIndicatorIcon, 
+    props.halfIndicatorIcon, 
+    props.fullIndicatorIcon
+))
+</script>

package/components/rating/Rating.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="flex gap-1">
+        <RatingItem
+            v-for="(icon, index) in items"
+            :key="index"
+            :icon
+            :size
+            :color
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    value: {
+        type: Number,
+        default: 0,
+    },
+    size: {
+        type: String as PropType<RatingItemSize>,
+        default: RatingItemSize.SM, 
+        validator: (value: RatingItemSize) => Object.values(RatingItemSize).includes(value),
+    },
+    color: {
+        type: String as PropType<RatingItemColor>,
+        default: RatingItemColor.GOLD, 
+        validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
+    },
+    emptyIndicatorIcon: {
+        type: String as PropType<any>,
+        default: 'mdiStarOutline'
+    },
+    halfIndicatorIcon: {
+        type: String as PropType<any>,
+        default: 'mdiStarHalfFull'
+    },
+    fullIndicatorIcon: {
+        type: String as PropType<any>,
+        default: 'mdiStar'
+    }
+})
+
+
+// Computed functions
+// Normalize value: clamp between 0 and 5, round to nearest 0.5
+const safeValue = computed(() => {
+    if (!isFinite(props.value) || isNaN(props.value))
+        return 0
+
+    return Math.min(5, Math.max(0, Math.round(props.value * 2) / 2))
+})
+
+const items = computed(() => getRatingIndicator(
+    safeValue.value, 
+    props.emptyIndicatorIcon, 
+    props.halfIndicatorIcon, 
+    props.fullIndicatorIcon
+))
+</script>

package/components/rating/RatingItem.vue

@@ -0,0 +1,54 @@
+<template>
+    <MdiIcon 
+        :icon 
+        :size="iconSize"
+        preserveAspectRatio="xMidYMid meet"
+        :class="[
+            colorClass,
+            isInteractive && 'hover:cursor-pointer'
+        ]"
+    />
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiStarOutline'
+    },
+    size: {
+        type: String as PropType<RatingItemSize>,
+        default: RatingItemSize.SM, 
+        validator: (value: RatingItemSize) => Object.values(RatingItemSize).includes(value),
+    },
+    color: {
+        type: String as PropType<RatingItemColor>,
+        default: RatingItemColor.GOLD, 
+        validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
+    },
+    isInteractive: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    }
+})
+
+// Computed
+const iconSize = computed(() => {
+    const sizeVariant = {
+        [RatingItemSize.SM]: '20',
+        [RatingItemSize.MD]: '24',
+        [RatingItemSize.LG]: '32',
+        [RatingItemSize.XL]: '40',
+        [RatingItemSize.XXL]: '48',
+    }
+    return sizeVariant[props.size as RatingItemSize] || '20'
+})
+
+const colorClass = computed(() => {
+    const colorVariants = {
+        [RatingItemColor.GOLD]: 'text-icon-rating',
+        [RatingItemColor.PRIMARY_BRAND]: 'text-icon-primary-brand-rating',
+    }
+    return colorVariants[props.color as RatingItemColor] || 'text-icon-rating'
+})
+</script>

package/components/skeletons/Skeleton.vue

@@ -0,0 +1,11 @@
+<template>
+    <div
+        :class="[
+            'w-20',
+            'h-10',
+            'bg-gray-200 dark:bg-gray-800',
+            'rounded',
+            'animate-pulse',
+        ]"
+    />
+</template>

package/components/spinners/Spinner.vue

@@ -0,0 +1,13 @@
+<template>
+    <div 
+        :class="[
+            'animate-spin',
+            'rounded-full',
+            'h-4',
+            'w-4',
+            'border-2',
+            'border-border-primary-brand-default',
+            'border-t-transparent',
+        ]"
+    />
+</template>

package/components/steppers/CircleStepper.vue

@@ -0,0 +1,122 @@
+<template>
+    <div 
+        :class="[
+            'flex items-center',
+            isFullWidth ? 'w-full' : 'w-fit',
+        ]"
+    >
+        <template v-for="(item, index) in stepItems" :key="index">
+            <StepIndicator
+                :type
+                :status="item.status"
+                :size="size"
+                :step="index + 1"
+                :stepIcon="item.icon"
+                :completedIcon
+                :isHovered="isInteractive && hoveredIndex === index"
+                @click="handleStepClick(index)"
+                @mouseenter="handleMouseEnter(index)"
+                @mouseleave="handleMouseLeave"
+            />
+
+            <!-- Line divider -->
+            <Divider 
+                v-if="index < stepItems.length - 1"
+                :class="[
+                    'min-w-[20px] sm:min-w-[40px]',
+                    'border-2',
+                    stepItems[index].status === StepStatus.COMPLETED && '!border-border-primary-brand-active',
+                    dividerClass
+                ]"
+            />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Imports
+const emit = defineEmits(['update:modelValue'])
+
+// Props
+const props = defineProps({
+    modelValue: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    steps: {
+        type: [Array, Number] as PropType<number | CircleStep[]>,
+        default: () => [
+            {
+                icon: 'mdiHomeOutline',
+            },
+            {
+                icon: 'mdiAccountOutline',
+            },
+            {
+                icon: 'mdiMapMarkerStarOutline',
+            },
+        ],
+    },
+    type: String as PropType<StepIndicatorType>,
+    size: String as PropType<StepIndicatorSize>,
+    completedIcon: String as PropType<any>,
+    isInteractive: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isFullWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    dividerClass: String as PropType<string>,
+})
+
+// States
+const hoveredIndex = ref<number | null>(null)
+
+// Computed step status
+const stepItems = computed(() => {
+    const activeIndex = props.modelValue > 0 ? props.modelValue - 1 : 0
+
+    const stepsArray = Array.isArray(props.steps)
+        ? props.steps
+        : Array.from({ length: props.steps }, () => ({}))
+
+    return stepsArray.map((step, index) => {
+        let status: StepStatus
+
+        if (index < activeIndex) {
+            status = StepStatus.COMPLETED
+        } else if (index === activeIndex) {
+            status = StepStatus.CURRENT
+        } else {
+            status = StepStatus.INACTIVE
+        }
+
+        const icon = typeof step === 'object' && 'icon' in step ? step.icon : undefined
+
+        return {
+            icon,
+            status,
+        }
+    })
+})
+
+
+// Handlers
+const handleStepClick = (index: number) => {
+    if (props.isInteractive) {
+        emit('update:modelValue', index + 1)
+    }
+}
+
+const handleMouseEnter = (index: number) => {
+    if (props.isInteractive) {
+        hoveredIndex.value = index
+    }
+}
+
+const handleMouseLeave = () => {
+    hoveredIndex.value = null
+}
+</script>

package/components/steppers/Step.vue

@@ -0,0 +1,72 @@
+<template>
+    <div 
+        :class="[
+            'flex gap-5',
+            'select-none',
+            !description && 'items-center',
+            isInteractive && 'cursor-pointer group',
+        ]"
+        @mouseenter="isInteractive && (isHovered = true)"
+        @mouseleave="isInteractive && (isHovered = false)"  
+    >
+        <StepIndicator 
+            :type
+            :status
+            :size
+            :step
+            :stepIcon
+            :completedIcon
+            :isHovered
+            class="!group-hover:border-red-500"
+        />
+        <div class="flex flex-col w-full text-sm">
+            <span
+                :class="[
+                    'font-semibold',
+                    titleClass,
+                ]"
+            >
+                {{ title }}
+            </span>
+            <p 
+                v-if="description"
+                class="text-text-neutral-inactive"
+            >
+                {{ description }}
+            </p>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Title',
+    },
+    description: String as PropType<string>,
+    type: String as PropType<StepIndicatorType>,
+    status: String as PropType<StepStatus>,
+    size: String as PropType<StepIndicatorSize>,
+    step: Number as PropType<number>,
+    stepIcon: String as PropType<any>,
+    completedIcon: String as PropType<any>,
+    isInteractive: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// States
+const isHovered = ref(false)
+
+// Computed classes
+const titleClass = computed(() => {
+    const variant = {
+        [StepStatus.INACTIVE]: 'text-text-neutral-inactive group-hover:text-text-primary-brand-hover',
+        [StepStatus.CURRENT]: 'text-text-primary-brand-active group-hover:text-text-primary-brand-hover',
+        [StepStatus.COMPLETED]: 'text-text-default group-hover:text-text-primary-brand-hover',
+    }
+    return variant[props.status as StepStatus] || 'text-text-neutral-inactive'
+})
+</script>