@imaginario27/air-ui-ds 1.0.0

package/components/buttons/options/OptionButtonGroup.vue

@@ -0,0 +1,155 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-wrap gap-2',
+        ]"
+    >
+        <OptionButton
+            v-for="(button, index) in displayButtons"
+            :key="index"
+            :active="isButtonActive(button)"
+            :text="button.text"
+            :size
+            :isRounded
+            :icon="button.icon"
+            :iconPosition="button.iconPosition"
+            :disabled="button.disabled"
+            :styleType="getButtonStyleType(button)"
+            :class="[isButtonActive(button) && 'border border-border-primary-brand-active']"
+            @click="handleButtonClick(button)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    modelValue: {
+        type: [String, Number, Array] as PropType<string | number | string[]>,
+        default: 'button-1',
+    },
+    buttons: {
+        type: Array as PropType<OptionButton[]>,
+        default: () => [
+            {
+                text: 'Button 1',
+                value: 'button-1',
+                action: () => {},
+            },
+            {
+                text: 'Button 2',
+                value: 'button-2',
+                action: () => {},
+            },
+        ],
+    },
+    styleType: {
+        type: String as PropType<
+            ButtonStyleType.NEUTRAL_OUTLINED | ButtonStyleType.PRIMARY_BRAND_SOFT
+        >,
+        default: ButtonStyleType.NEUTRAL_OUTLINED,
+        validator: (value: ButtonStyleType.NEUTRAL_OUTLINED | ButtonStyleType.PRIMARY_BRAND_SOFT) =>
+            [ButtonStyleType.NEUTRAL_OUTLINED, ButtonStyleType.PRIMARY_BRAND_SOFT].includes(value),
+    },
+    size: String as PropType<ButtonSize>,
+    isRounded: Boolean as PropType<boolean>,
+    isMultiple: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasAllButton: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    allButtonText: {
+        type: String as PropType<string>,
+        default: 'All',
+    },
+    allButtonValue: {
+        type: String as PropType<string>,
+        default: 'all',
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Create the dynamic "All" button using user props
+const allButton = computed<OptionButton>(() => ({
+    text: props.allButtonText,
+    value: props.allButtonValue,
+    size: props.size,
+    action: () => {},
+}))
+
+// Computed list of buttons
+const displayButtons = computed(() => {
+    return props.hasAllButton
+        ? [allButton.value, ...props.buttons]
+        : props.buttons
+})
+
+// Active state logic
+const isButtonActive = (button: OptionButton) => {
+    if (props.isMultiple) {
+        if (button.value === props.allButtonValue) {
+            if (!Array.isArray(props.modelValue)) return false
+            const selected = props.modelValue
+            return selected.length === 0 || selected.length === props.buttons.length
+        }
+
+        if (Array.isArray(props.modelValue)) {
+            return props.modelValue.includes(button.value)
+        }
+
+        return false
+    }
+
+    return button.value === props.modelValue
+}
+
+
+// Handlers
+const getButtonStyleType = (button: OptionButton) => {
+    if(props.styleType === ButtonStyleType.PRIMARY_BRAND_SOFT) {
+        return isButtonActive(button) 
+        ? ButtonStyleType.PRIMARY_BRAND_FILLED 
+        : ButtonStyleType.PRIMARY_BRAND_SOFT
+    }
+
+    // Default style for outlined
+    return isButtonActive(button) 
+        ? ButtonStyleType.PRIMARY_BRAND_SOFT 
+        : ButtonStyleType.NEUTRAL_OUTLINED
+}
+
+const handleButtonClick = (button: OptionButton) => {
+    if (button?.action) {
+        button.action()
+    }
+
+    const isAllButton = button.value === props.allButtonValue
+
+    // Multiple select with "All" logic
+    if (props.isMultiple) {
+        if (isAllButton) {
+            const allValues = props.buttons.map(b => b.value)
+            const selected = props.modelValue as string[]
+            const isAllSelected = selected.length === allValues.length
+            emit('update:modelValue', isAllSelected ? [] : allValues)
+            return
+        }
+
+        if (Array.isArray(props.modelValue)) {
+            const isActive = props.modelValue.includes(button.value)
+            const updated = isActive
+                ? props.modelValue.filter(v => v !== button.value)
+                : [...props.modelValue, button.value]
+            emit('update:modelValue', updated)
+        }
+    } else {
+        // Single-select: treat all buttons the same
+        emit('update:modelValue', button.value)
+    }
+}
+</script>

package/components/buttons/options/OptionButtonSlider.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="relative overflow-hidden">
+        <!-- Sombras difuminadas laterales -->
+        <div class="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-white/90 to-transparent z-10"></div>
+        <div class="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white/90 to-transparent z-10"></div>
+
+        <!-- Carrusel de botones -->
+        <div
+            ref="carousel"
+            class="flex gap-3 overflow-x-auto no-scrollbar px-2 py-1 cursor-grab active:cursor-grabbing select-none"
+            @mousedown="startDrag"
+            @mousemove="onDrag"
+            @mouseup="stopDrag"
+            @mouseleave="stopDrag"
+        >
+            <OptionButton
+                v-for="(button, index) in displayButtons"
+                :key="index"
+                :active="isButtonActive(button)"
+                :text="button.text"
+                :size="button.size"
+                :icon="button.icon"
+                :iconPosition="button.iconPosition"
+                :disabled="button.disabled"
+                :styleType="getButtonStyleType(button)"
+                @click="handleButtonClick(button)"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: 'button-1',
+    },
+    buttons: {
+        type: Array as PropType<OptionButton[]>,
+        default: () => [],
+    },
+    styleType: String as PropType<ButtonStyleType>,
+    size: String as PropType<ButtonSize>,
+    isMultiple: {
+        type: Boolean,
+        default: false,
+    },
+    hasAllButton: {
+        type: Boolean,
+        default: false,
+    },
+    allButtonText: {
+        type: String,
+        default: 'All',
+    },
+    allButtonValue: {
+        type: String,
+        default: 'all',
+    },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const allButton = computed<OptionButton>(() => ({
+    text: props.allButtonText,
+    value: props.allButtonValue,
+    size: props.size,
+    action: () => {},
+}))
+
+const displayButtons = computed(() => {
+    return props.hasAllButton ? [allButton.value, ...props.buttons] : props.buttons
+})
+
+const isButtonActive = (button: OptionButton) => {
+    if (props.isMultiple) {
+        if (button.value === props.allButtonValue) {
+            if (!Array.isArray(props.modelValue)) return false
+            return (
+                props.modelValue.length === 0 ||
+                props.modelValue.length === props.buttons.length
+            )
+        }
+
+        return Array.isArray(props.modelValue) && props.modelValue.includes(button.value)
+    }
+
+    return button.value === props.modelValue
+}
+
+// NUEVO: Determinar el estilo del botón según si está activo
+const getButtonStyleType = (button: OptionButton) => {
+    return isButtonActive(button) 
+        ? ButtonStyleType.PRIMARY_BRAND_FILLED 
+        : ButtonStyleType.PRIMARY_BRAND_SOFT
+}
+
+const handleButtonClick = (button: OptionButton) => {
+    button?.action?.()
+
+    if (props.isMultiple) {
+        if (button.value === props.allButtonValue) {
+            const allValues = props.buttons.map(b => b.value)
+            const selected = props.modelValue as string[]
+            const isAllSelected = selected.length === allValues.length
+            emit('update:modelValue', isAllSelected ? [] : allValues)
+        } else if (Array.isArray(props.modelValue)) {
+            const isActive = props.modelValue.includes(button.value)
+            const updated = isActive
+                ? props.modelValue.filter(v => v !== button.value)
+                : [...props.modelValue, button.value]
+            emit('update:modelValue', updated)
+        }
+    } else {
+        emit('update:modelValue', button.value)
+    }
+}
+
+const carousel = ref<HTMLElement | null>(null)
+let isDragging = false
+let startX = 0
+let scrollLeft = 0
+
+const startDrag = (e: MouseEvent) => {
+    if (!carousel.value) return
+    isDragging = true
+    startX = e.pageX - carousel.value.offsetLeft
+    scrollLeft = carousel.value.scrollLeft
+}
+
+const onDrag = (e: MouseEvent) => {
+    if (!isDragging || !carousel.value) return
+    const x = e.pageX - carousel.value.offsetLeft
+    const walk = (x - startX) * 1.5
+    carousel.value.scrollLeft = scrollLeft - walk
+}
+
+const stopDrag = () => {
+    isDragging = false
+}
+</script>
+
+<style scoped>
+/* Ocultar scroll nativo */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+.no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+</style>

package/components/buttons/toggle/ToggleButton.vue

@@ -0,0 +1,142 @@
+<template>
+    <button
+        type="button"
+        :disabled="disabled"
+        :class="[
+            'flex items-center justify-center',
+            'aspect-square',
+            'text-nowrap',
+            ...buttonStyleClass,
+            buttonSizeClass,
+            horizontalPaddingClass,
+            gapClass,
+            disabled ? 'opacity-disabled cursor-not-allowed' : '',
+            'self-start',
+        ]"
+        @click="emitClick"
+    >
+        <!-- Left icon -->
+        <MdiIcon
+            v-if="iconPosition === IconPosition.LEFT"
+            :icon="icon"
+            preserveAspectRatio="xMidYMid meet"
+            :size="iconSizeClass"
+        />
+        <span :class="['font-semibold', textSizeClass]">
+            {{ text }}
+        </span>
+        <!-- Right icon -->
+        <MdiIcon
+            v-if="iconPosition === IconPosition.RIGHT"
+            :icon="icon"
+            preserveAspectRatio="xMidYMid meet"
+            :size="iconSizeClass"
+        />
+    </button>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    text: {
+        type: String as PropType<string>,
+        default: 'Button text',
+    },
+    size: {
+        type: String as PropType<ButtonSize>,
+        default: ButtonSize.LG,
+        validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
+    iconPosition: {
+        type: String as PropType<IconPosition>,
+        default: IconPosition.NONE,
+        validator: (value: IconPosition) => Object.values(IconPosition).includes(value),
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    active: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Emits
+const emit = defineEmits(['click'])
+const emitClick = () => {
+    if (!props.disabled) {
+        emit('click')
+    }
+}
+
+// Computed classes
+const buttonStyleClass = computed(() =>
+    props.active
+        ? ['bg-background-primary-brand-subtle-active', 'text-text-primary-brand-on-soft-bg']
+        : ['text-text-neutral-inactive', 'hover:text-text-primary-brand-hover']
+)
+
+const buttonSizeClass = computed(() => {
+    const sizeVariant = {
+        [ButtonSize.XS]: 'h-[24px]',
+        [ButtonSize.SM]: 'h-[28px]',
+        [ButtonSize.MD]: 'h-[32px]',
+        [ButtonSize.LG]: 'h-[36px]',
+        [ButtonSize.XL]: 'h-[40px]',
+        [ButtonSize.XXL]: 'h-[48px]',
+    }
+    return sizeVariant[props.size as ButtonSize] || 'h-[36px]'
+})
+
+const iconSizeClass = computed(() => {
+    const sizeVariant = {
+        [ButtonSize.XS]: '16px',
+        [ButtonSize.SM]: '16px',
+        [ButtonSize.MD]: '16px',
+        [ButtonSize.LG]: '20px',
+        [ButtonSize.XL]: '20px',
+        [ButtonSize.XXL]: '24px',
+    }
+    return sizeVariant[props.size as ButtonSize] || '20px'
+})
+
+const textSizeClass = computed(() => {
+    const sizeVariant = {
+        [ButtonSize.XS]: 'text-xs',
+        [ButtonSize.SM]: 'text-sm',
+        [ButtonSize.MD]: 'text-sm',
+        [ButtonSize.LG]: 'text-sm',
+        [ButtonSize.XL]: 'text-sm',
+        [ButtonSize.XXL]: 'text-base',
+    }
+    return sizeVariant[props.size as ButtonSize] || 'text-sm'
+})
+
+const horizontalPaddingClass = computed(() => {
+    const sizeVariant = {
+        [ButtonSize.XS]: 'px-2',
+        [ButtonSize.SM]: 'px-2',
+        [ButtonSize.MD]: 'px-2.5',
+        [ButtonSize.LG]: 'px-3',
+        [ButtonSize.XL]: 'px-3.5',
+        [ButtonSize.XXL]: 'px-4',
+    }
+    return sizeVariant[props.size as ButtonSize] || 'px-3'
+})
+
+const gapClass = computed(() => {
+    const sizeVariant = {
+        [ButtonSize.XS]: 'gap-1',
+        [ButtonSize.SM]: 'gap-1.5',
+        [ButtonSize.MD]: 'gap-2',
+        [ButtonSize.LG]: 'gap-2',
+        [ButtonSize.XL]: 'gap-2',
+        [ButtonSize.XXL]: 'gap-2',
+    }
+    return sizeVariant[props.size as ButtonSize] || 'gap-2'
+})
+</script>

package/components/buttons/toggle/ToggleButtonGroup.vue

@@ -0,0 +1,73 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            groupStyle === ToggleButtonGroupStyle.GROUPED ? 'border border-border-default overflow-hidden' : 'flex-wrap gap-3',
+            'w-fit',
+            'rounded-button'
+        ]"
+    >
+        <ToggleButton
+            v-for="(button, index) in buttons"
+            :key="index"
+            :active="button.value === modelValue"
+            :text="button.text"
+            :size="button.size"
+            :icon="button.icon"
+            :iconPosition="button.iconPosition"
+            :disabled="button.disabled"
+            :class="[
+                groupStyle === ToggleButtonGroupStyle.SEGMENTED && hasButtonBorder && 'border border-border-default rounded',
+                groupStyle === ToggleButtonGroupStyle.SEGMENTED && button.active && '!border-border-primary-brand-active',
+                !hasButtonBorder && 'rounded-button',
+            ]"
+            @click="handleButtonClick(button)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    modelValue: {
+        type: String as PropType<string>,
+        default: 'button-1',
+    },
+    buttons: {
+        type: Array as PropType<ToggleButton[]>,
+        default: () => [
+            {
+                text: 'Button 1',
+                value: 'button-1',
+                action: () => {},
+            },
+            {
+                text: 'Button 2',
+                value: 'button-2',
+                action: () => {},
+            },
+        ],
+    },
+    groupStyle: {
+        type: String as PropType<ToggleButtonGroupStyle>,
+        default: ToggleButtonGroupStyle.GROUPED,
+        validator: (value: ToggleButtonGroupStyle) => Object.values(ToggleButtonGroupStyle).includes(value),
+    },
+    hasButtonBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Handlers
+const handleButtonClick = (button: ToggleButton) => {
+    if (button?.action) {
+        button.action()
+    }
+
+    emit('update:modelValue', button.value)
+}
+</script>

package/components/cards/Card.vue

@@ -0,0 +1,33 @@
+<template>
+    <div 
+        :class="[
+            'flex flex-col gap-5',
+            'bg-background-container-surface',
+            'p-4',
+            hasBorder ? 'border border-border-default' : undefined,
+            'rounded-lg',
+            hasShadow ? 'shadow-sm' : undefined,
+            'w-full',
+            hasBackgroundHover && 'hover:bg-background-neutral-subtlest/40',
+        ]"
+    >
+        <slot />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    hasShadow: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasBackgroundHover: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/cards/CardActions.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex gap-2 flex-col md:flex-row">
+        <slot />
+    </div>
+</template>

package/components/cards/CardBody.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex flex-col gap-4 w-full">
+        <slot />
+    </div>
+</template>

package/components/cards/CardFooter.vue

@@ -0,0 +1,20 @@
+<template>
+    <div 
+        :class="[
+            'flex flex-col gap-4 w-full pt-5',
+            hasBorder && 'border-t border-border-neutral-subtle'
+        ]"
+    >
+        <slot />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true
+    }
+})
+
+</script>

package/components/cards/CardHeader.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex justify-between gap-3 w-full">
+        <slot />
+    </div>
+</template>

package/components/cards/CardTitle.vue

@@ -0,0 +1,13 @@
+<template>
+    <h3 class="font-semibold w-full">
+        {{ title }}
+    </h3>
+</template>
+<script setup lang="ts">
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Card title'
+    }
+})
+</script>

package/components/cards/specific/ContactDetailsCard.vue

@@ -0,0 +1,47 @@
+<template>
+    <Card class="lg:py-7 lg:px-8 bg-background-neutral-subtlest border-0">
+        <CardHeader>
+            <CardTitle :title="name"/>
+        </CardHeader>
+        <CardBody>
+            <div 
+                v-if="email" 
+                class="flex gap-2 items-center text-text-primary-brand-default"
+            >
+                <MdiIcon
+                    icon="mdiAt"
+                    size="20"
+                    preserveAspectRatio="xMidYMid meet"
+                />
+                <span class="font-semibold text-sm">
+                    {{ email }}
+                </span>
+            </div>
+
+            <div 
+                v-if="phone" 
+                class="flex gap-2 items-center text-text-neutral-subtle"
+            >
+                <MdiIcon
+                    icon="mdiPhoneOutline"
+                    size="20"
+                    preserveAspectRatio="xMidYMid meet"
+                />
+                <span class="text-sm">
+                    {{ phone }}
+                </span>
+            </div>
+        </CardBody>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    name: {
+        type: String as PropType<string>,
+        default: 'John Doe'
+    },
+    email: String as PropType<string>,
+    phone: String as PropType<string>,
+})
+</script>