Types not working in typescript.

[iyashpal]

Describe the bug
Typescript type/inference is not working in beta@4.

To Reproduce
Steps to reproduce the behavior:

1. Create a component variations
2. export the component prop types for the variations
3. apply the props to the component.
4. When I try to use the component it do not provide the type hint for the prop type.

Expected behavior
It should list the defined variations in props. instead it shows the prop type any

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 26.2

Reference Code

import {colors} from "@/components/cva";
import {cva} from "cva";
import type {VariantProps} from "cva";

const buttonVariants = cva({

    base: [
        "relative inline-flex overflow-hidden items-center justify-center whitespace-nowrap font-medium cursor-pointer shadow-none",
        "disabled:opacity-75 dark:disabled:opacity-60 disabled:cursor-default disabled:pointer-events-none",
        "focus-visible:outline-2 focus-visible:outline-offset-1",
        "transition-all ease-in-out duration-200",
    ],

    variants: {
        variant: {
            primary: "text-white",
            outline: "inset-ring",
            soft: "",
            ghost: "bg-transparent",
        },
        color: colors,
        size: {
            xs: "px-1.5 py-1.5 text-xs gap-x-1 h-6",
            sm: "px-2 py-1 text-sm gap-x-1.5 h-7",
            md: "px-2.5 py-1.5 text-sm gap-x-1.5 h-8",
            lg: "px-3 py-2 text-sm gap-x-2 h-9",
            xl: "px-3.5 py-2.5 text-sm gap-x-2 h-10",
        },
        square: {
            true: '',
            false: '',
        },
        loading: {
            true: '[&>*:not([data-loader])]:opacity-0',
            false: ''
        },
        rounded: {
            none: 'rounded-none',
            xs: "rounded-xs",
            sm: "rounded-sm",
            md: "rounded-md",
            lg: "rounded-lg",
            xl: "rounded-xl",
            full: 'rounded-full'
        }
    },
    compoundVariants: [
        // Primary
        {variant: "primary", color: "primary", class: ["bg-primary-500 hover:bg-primary-500/90 focus-visible:outline-primary-300", "dark:bg-primary-500 dark:hover:bg-primary-500/90 dark:focus-visible:outline-primary-300"]},
        {variant: "primary", color: "indigo", class: ["bg-indigo-500 hover:bg-indigo-500/90 focus-visible:outline-indigo-300", "dark:bg-indigo-500 dark:hover:bg-indigo-500/90 dark:focus-visible:outline-indigo-300"]},
        {variant: "primary", color: "zinc", class: ["bg-zinc-950 hover:bg-zinc-500/90 focus-visible:outline-zinc-300", "dark:bg-zinc-500 dark:hover:bg-zinc-500/90 dark:focus-visible:outline-zinc-300"]},
        {variant: "primary", color: "gray", class: ["bg-gray-950 hover:bg-gray-500/90 focus-visible:outline-gray-300", "dark:bg-gray-500 dark:hover:bg-gray-500/90 dark:focus-visible:outline-gray-300"]},
        {variant: "primary", color: "red", class: ["bg-red-500 hover:bg-red-500/90 focus-visible:outline-red-300", "dark:bg-red-500 dark:hover:bg-red-500/90 dark:focus-visible:outline-red-300"]},
        {variant: "primary", color: "orange", class: ["bg-orange-500 hover:bg-orange-500/90 focus-visible:outline-orange-300", "dark:bg-orange-500 dark:hover:bg-orange-500/90 dark:focus-visible:outline-orange-300"]},
        {variant: "primary", color: "amber", class: ["bg-amber-500 hover:bg-amber-500/90 focus-visible:outline-amber-300", "dark:bg-amber-500 dark:hover:bg-amber-500/90 dark:focus-visible:outline-amber-300"]},
        {variant: "primary", color: "yellow", class: ["bg-yellow-500 hover:bg-yellow-500/90 focus-visible:outline-yellow-300", "dark:bg-yellow-500 dark:hover:bg-yellow-500/90 dark:focus-visible:outline-yellow-300"]},
        {variant: "primary", color: "lime", class: ["bg-lime-500 hover:bg-lime-500/90 focus-visible:outline-lime-300", "dark:bg-lime-500 dark:hover:bg-lime-500/90 dark:focus-visible:outline-lime-300"]},
        {variant: "primary", color: "green", class: ["bg-green-500 hover:bg-green-500/90 focus-visible:outline-green-300", "dark:bg-green-500 dark:hover:bg-green-500/90 dark:focus-visible:outline-green-300"]},
        {variant: "primary", color: "emerald", class: ["bg-emerald-500 hover:bg-emerald-500/90 focus-visible:outline-emerald-300", "dark:bg-emerald-500 dark:hover:bg-emerald-500/90 dark:focus-visible:outline-emerald-300"]},
        {variant: "primary", color: "teal", class: ["bg-teal-500 hover:bg-teal-500/90 focus-visible:outline-teal-300", "dark:bg-teal-500 dark:hover:bg-teal-500/90 dark:focus-visible:outline-teal-300"]},
        {variant: "primary", color: "cyan", class: ["bg-cyan-500 hover:bg-cyan-500/90 focus-visible:outline-cyan-300", "dark:bg-cyan-500 dark:hover:bg-cyan-500/90 dark:focus-visible:outline-cyan-300"]},
        {variant: "primary", color: "sky", class: ["bg-sky-500 hover:bg-sky-500/90 focus-visible:outline-sky-300", "dark:bg-sky-500 dark:hover:bg-sky-500/90 dark:focus-visible:outline-sky-300"]},
        {variant: "primary", color: "blue", class: ["bg-blue-500 hover:bg-blue-500/90 focus-visible:outline-blue-300", "dark:bg-blue-500 dark:hover:bg-blue-500/90 dark:focus-visible:outline-blue-300"]},
        {variant: "primary", color: "violet", class: ["bg-violet-500 hover:bg-violet-500/90 focus-visible:outline-violet-300", "dark:bg-violet-500 dark:hover:bg-violet-500/90 dark:focus-visible:outline-violet-300"]},
        {variant: "primary", color: "purple", class: ["bg-purple-500 hover:bg-purple-500/90 focus-visible:outline-purple-300", "dark:bg-purple-500 dark:hover:bg-purple-500/90 dark:focus-visible:outline-purple-300"]},
        {variant: "primary", color: "fuchsia", class: ["bg-fuchsia-500 hover:bg-fuchsia-500/90 focus-visible:outline-fuchsia-300", "dark:bg-fuchsia-500 dark:hover:bg-fuchsia-500/90 dark:focus-visible:outline-fuchsia-300"]},
        {variant: "primary", color: "pink", class: ["bg-pink-500 hover:bg-pink-500/90 focus-visible:outline-pink-300", "dark:bg-pink-500 dark:hover:bg-pink-500/90 dark:focus-visible:outline-pink-300"]},
        {variant: "primary", color: "rose", class: ["bg-rose-500 hover:bg-rose-500/90 focus-visible:outline-rose-300", "dark:bg-rose-500 dark:hover:bg-rose-500/90 dark:focus-visible:outline-rose-300"]},

        // Outline
        {variant: "outline", color: "primary", class: ["text-primary-500 bg-primary-100 inset-ring-primary-300 hover:bg-primary-50 focus-visible:outline-primary-500", "dark:text-primary-400 dark:bg-primary-800/50 dark:inset-ring-primary-500/70 dark:hover:bg-primary-700/20 dark:focus-visible:outline-primary-300"]},
        {variant: "outline", color: "indigo", class: ["text-indigo-500 bg-indigo-100 inset-ring-indigo-300 hover:bg-indigo-50 focus-visible:outline-indigo-500", "dark:text-indigo-400 dark:bg-indigo-800/50 dark:inset-ring-indigo-500/70 dark:hover:bg-indigo-700/20 dark:focus-visible:outline-indigo-300"]},
        {variant: "outline", color: "zinc", class: ["text-zinc-500 bg-zinc-100 inset-ring-zinc-300 hover:bg-zinc-50 focus-visible:outline-zinc-500", "dark:text-zinc-400 dark:bg-zinc-800/50 dark:inset-ring-zinc-500/70 dark:hover:bg-zinc-700/20 dark:focus-visible:outline-zinc-300"]},
        {variant: "outline", color: "gray", class: ["text-gray-500 bg-gray-100 inset-ring-gray-300 hover:bg-gray-50 focus-visible:outline-gray-500", "dark:text-gray-400 dark:bg-gray-800/50 dark:inset-ring-gray-500/70 dark:hover:bg-gray-700/20 dark:focus-visible:outline-gray-300"]},
        {variant: "outline", color: "red", class: ["text-red-500 bg-red-100 inset-ring-red-300 hover:bg-red-50 focus-visible:outline-red-500", "dark:text-red-400 dark:bg-red-800/50 dark:inset-ring-red-500/70 dark:hover:bg-red-700/20 dark:focus-visible:outline-red-300"]},
        {variant: "outline", color: "orange", class: ["text-orange-500 bg-orange-100 inset-ring-orange-300 hover:bg-orange-50 focus-visible:outline-orange-500", "dark:text-orange-400 dark:bg-orange-800/50 dark:inset-ring-orange-500/70 dark:hover:bg-orange-700/20 dark:focus-visible:outline-orange-300"]},
        {variant: "outline", color: "amber", class: ["text-amber-500 bg-amber-100 inset-ring-amber-300 hover:bg-amber-50 focus-visible:outline-amber-500", "dark:text-amber-400 dark:bg-amber-800/50 dark:inset-ring-amber-500/70 dark:hover:bg-amber-700/20 dark:focus-visible:outline-amber-300"]},
        {variant: "outline", color: "yellow", class: ["text-yellow-500 bg-yellow-100 inset-ring-yellow-300 hover:bg-yellow-50 focus-visible:outline-yellow-500", "dark:text-yellow-400 dark:bg-yellow-800/50 dark:inset-ring-yellow-500/70 dark:hover:bg-yellow-700/20 dark:focus-visible:outline-yellow-300"]},
        {variant: "outline", color: "lime", class: ["text-lime-500 bg-lime-100 inset-ring-lime-300 hover:bg-lime-50 focus-visible:outline-lime-500", "dark:text-lime-400 dark:bg-lime-800/50 dark:inset-ring-lime-500/70 dark:hover:bg-lime-700/20 dark:focus-visible:outline-lime-300"]},
        {variant: "outline", color: "green", class: ["text-green-500 bg-green-100 inset-ring-green-300 hover:bg-green-50 focus-visible:outline-green-500", "dark:text-green-400 dark:bg-green-800/50 dark:inset-ring-green-500/70 dark:hover:bg-green-700/20 dark:focus-visible:outline-green-300"]},
        {variant: "outline", color: "emerald", class: ["text-emerald-500 bg-emerald-100 inset-ring-emerald-300 hover:bg-emerald-50 focus-visible:outline-emerald-500", "dark:text-emerald-400 dark:bg-emerald-800/50 dark:inset-ring-emerald-500/70 dark:hover:bg-emerald-700/20 dark:focus-visible:outline-emerald-300"]},
        {variant: "outline", color: "teal", class: ["text-teal-500 bg-teal-100 inset-ring-teal-300 hover:bg-teal-50 focus-visible:outline-teal-500", "dark:text-teal-400 dark:bg-teal-800/50 dark:inset-ring-teal-500/70 dark:hover:bg-teal-700/20 dark:focus-visible:outline-teal-300"]},
        {variant: "outline", color: "cyan", class: ["text-cyan-500 bg-cyan-100 inset-ring-cyan-300 hover:bg-cyan-50 focus-visible:outline-cyan-500", "dark:text-cyan-400 dark:bg-cyan-800/50 dark:inset-ring-cyan-500/70 dark:hover:bg-cyan-700/20 dark:focus-visible:outline-cyan-300"]},
        {variant: "outline", color: "sky", class: ["text-sky-500 bg-sky-100 inset-ring-sky-300 hover:bg-sky-50 focus-visible:outline-sky-500", "dark:text-sky-400 dark:bg-sky-800/50 dark:inset-ring-sky-500/70 dark:hover:bg-sky-700/20 dark:focus-visible:outline-sky-300"]},
        {variant: "outline", color: "blue", class: ["text-blue-500 bg-blue-100 inset-ring-blue-300 hover:bg-blue-50 focus-visible:outline-blue-500", "dark:text-blue-400 dark:bg-blue-800/50 dark:inset-ring-blue-500/70 dark:hover:bg-blue-700/20 dark:focus-visible:outline-blue-300"]},
        {variant: "outline", color: "violet", class: ["text-violet-500 bg-violet-100 inset-ring-violet-300 hover:bg-violet-50 focus-visible:outline-violet-500", "dark:text-violet-400 dark:bg-violet-800/50 dark:inset-ring-violet-500/70 dark:hover:bg-violet-700/20 dark:focus-visible:outline-violet-300"]},
        {variant: "outline", color: "purple", class: ["text-purple-500 bg-purple-100 inset-ring-purple-300 hover:bg-purple-50 focus-visible:outline-purple-500", "dark:text-purple-400 dark:bg-purple-800/50 dark:inset-ring-purple-500/70 dark:hover:bg-purple-700/20 dark:focus-visible:outline-purple-300"]},
        {variant: "outline", color: "fuchsia", class: ["text-fuchsia-500 bg-fuchsia-100 inset-ring-fuchsia-300 hover:bg-fuchsia-50 focus-visible:outline-fuchsia-500", "dark:text-fuchsia-400 dark:bg-fuchsia-800/50 dark:inset-ring-fuchsia-500/70 dark:hover:bg-fuchsia-700/20 dark:focus-visible:outline-fuchsia-300"]},
        {variant: "outline", color: "pink", class: ["text-pink-500 bg-pink-100 inset-ring-pink-300 hover:bg-pink-50 focus-visible:outline-pink-500", "dark:text-pink-400 dark:bg-pink-800/50 dark:inset-ring-pink-500/70 dark:hover:bg-pink-700/20 dark:focus-visible:outline-pink-300"]},
        {variant: "outline", color: "rose", class: ["text-rose-500 bg-rose-100 inset-ring-rose-300 hover:bg-rose-50 focus-visible:outline-rose-500", "dark:text-rose-400 dark:bg-rose-800/50 dark:inset-ring-rose-500/70 dark:hover:bg-rose-700/20 dark:focus-visible:outline-rose-300"]},

        // soft
        {variant: "soft", color: "primary", class: ["bg-primary-100 text-primary-500 hover:bg-primary-100", "dark:bg-primary-500/20 dark:text-primary-400 dark:hover:bg-primary-500/30"]},
        {variant: "soft", color: "indigo", class: ["bg-indigo-100 text-indigo-500 hover:bg-indigo-100", "dark:bg-indigo-500/20 dark:text-indigo-400 dark:hover:bg-indigo-500/30"]},
        {variant: "soft", color: "zinc", class: ["bg-zinc-100 text-zinc-500 hover:bg-zinc-100", "dark:bg-zinc-500/20 dark:text-zinc-400 dark:hover:bg-zinc-500/30"]},
        {variant: "soft", color: "gray", class: ["bg-gray-100 text-gray-500 hover:bg-gray-100", "dark:bg-gray-500/20 dark:text-gray-400 dark:hover:bg-gray-500/30"]},
        {variant: "soft", color: "red", class: ["bg-red-100 text-red-500 hover:bg-red-100", "dark:bg-red-500/20 dark:text-red-400 dark:hover:bg-red-500/30"]},
        {variant: "soft", color: "orange", class: ["bg-orange-100 text-orange-500 hover:bg-orange-100", "dark:bg-orange-500/20 dark:text-orange-400 dark:hover:bg-orange-500/30"]},
        {variant: "soft", color: "amber", class: ["bg-amber-100 text-amber-500 hover:bg-amber-100", "dark:bg-amber-500/20 dark:text-amber-400 dark:hover:bg-amber-500/30"]},
        {variant: "soft", color: "yellow", class: ["bg-yellow-100 text-yellow-500 hover:bg-yellow-100", "dark:bg-yellow-500/20 dark:text-yellow-400 dark:hover:bg-yellow-500/30"]},
        {variant: "soft", color: "lime", class: ["bg-lime-100 text-lime-500 hover:bg-lime-100", "dark:bg-lime-500/20 dark:text-lime-400 dark:hover:bg-lime-500/30"]},
        {variant: "soft", color: "green", class: ["bg-green-100 text-green-500 hover:bg-green-100", "dark:bg-green-500/20 dark:text-green-400 dark:hover:bg-green-500/30"]},
        {variant: "soft", color: "emerald", class: ["bg-emerald-100 text-emerald-500 hover:bg-emerald-100", "dark:bg-emerald-500/20 dark:text-emerald-400 dark:hover:bg-emerald-500/30"]},
        {variant: "soft", color: "teal", class: ["bg-teal-100 text-teal-500 hover:bg-teal-100", "dark:bg-teal-500/20 dark:text-teal-400 dark:hover:bg-teal-500/30"]},
        {variant: "soft", color: "cyan", class: ["bg-cyan-100 text-cyan-500 hover:bg-cyan-100", "dark:bg-cyan-500/20 dark:text-cyan-400 dark:hover:bg-cyan-500/30"]},
        {variant: "soft", color: "sky", class: ["bg-sky-100 text-sky-500 hover:bg-sky-100", "dark:bg-sky-500/20 dark:text-sky-400 dark:hover:bg-sky-500/30"]},
        {variant: "soft", color: "blue", class: ["bg-blue-100 text-blue-500 hover:bg-blue-100", "dark:bg-blue-500/20 dark:text-blue-400 dark:hover:bg-blue-500/30"]},
        {variant: "soft", color: "violet", class: ["bg-violet-100 text-violet-500 hover:bg-violet-100", "dark:bg-violet-500/20 dark:text-violet-400 dark:hover:bg-violet-500/30"]},
        {variant: "soft", color: "purple", class: ["bg-purple-100 text-purple-500 hover:bg-purple-100", "dark:bg-purple-500/20 dark:text-purple-400 dark:hover:bg-purple-500/30"]},
        {variant: "soft", color: "fuchsia", class: ["bg-fuchsia-100 text-fuchsia-500 hover:bg-fuchsia-100", "dark:bg-fuchsia-500/20 dark:text-fuchsia-400 dark:hover:bg-fuchsia-500/30"]},
        {variant: "soft", color: "pink", class: ["bg-pink-100 text-pink-500 hover:bg-pink-100", "dark:bg-pink-500/20 dark:text-pink-400 dark:hover:bg-pink-500/30"]},
        {variant: "soft", color: "rose", class: ["bg-rose-100 text-rose-500 hover:bg-rose-100", "dark:bg-rose-500/20 dark:text-rose-400 dark:hover:bg-rose-500/30"]},

        // ghost
        {variant: "ghost", color: "primary", class: ["text-primary-500 hover:bg-primary-500/5", " dark:hover:bg-primary-500/15"]},
        {variant: "ghost", color: "indigo", class: ["text-indigo-500 hover:bg-indigo-500/5", " dark:hover:bg-indigo-500/15"]},
        {variant: "ghost", color: "zinc", class: ["text-zinc-500 hover:bg-zinc-500/5", " dark:hover:bg-zinc-500/15"]},
        {variant: "ghost", color: "gray", class: ["text-gray-500 hover:bg-gray-500/5", " dark:hover:bg-gray-500/15"]},
        {variant: "ghost", color: "red", class: ["text-red-500 hover:bg-red-500/5", " dark:hover:bg-red-500/15"]},
        {variant: "ghost", color: "orange", class: ["text-orange-500 hover:bg-orange-500/5", " dark:hover:bg-orange-500/15"]},
        {variant: "ghost", color: "amber", class: ["text-amber-500 hover:bg-amber-500/5", " dark:hover:bg-amber-500/15"]},
        {variant: "ghost", color: "yellow", class: ["text-yellow-500 hover:bg-yellow-500/5", " dark:hover:bg-yellow-500/15"]},
        {variant: "ghost", color: "lime", class: ["text-lime-500 hover:bg-lime-500/5", " dark:hover:bg-lime-500/15"]},
        {variant: "ghost", color: "green", class: ["text-green-500 hover:bg-green-500/5", " dark:hover:bg-green-500/15"]},
        {variant: "ghost", color: "emerald", class: ["text-emerald-500 hover:bg-emerald-500/5", " dark:hover:bg-emerald-500/15"]},
        {variant: "ghost", color: "teal", class: ["text-teal-500 hover:bg-teal-500/5", " dark:hover:bg-teal-500/15"]},
        {variant: "ghost", color: "cyan", class: ["text-cyan-500 hover:bg-cyan-500/5", " dark:hover:bg-cyan-500/15"]},
        {variant: "ghost", color: "sky", class: ["text-sky-500 hover:bg-sky-500/5", " dark:hover:bg-sky-500/15"]},
        {variant: "ghost", color: "blue", class: ["text-blue-500 hover:bg-blue-500/5", " dark:hover:bg-blue-500/15"]},
        {variant: "ghost", color: "violet", class: ["text-violet-500 hover:bg-violet-500/5", " dark:hover:bg-violet-500/15"]},
        {variant: "ghost", color: "purple", class: ["text-purple-500 hover:bg-purple-500/5", " dark:hover:bg-purple-500/15"]},
        {variant: "ghost", color: "fuchsia", class: ["text-fuchsia-500 hover:bg-fuchsia-500/5", " dark:hover:bg-fuchsia-500/15"]},
        {variant: "ghost", color: "pink", class: ["text-pink-500 hover:bg-pink-500/5", " dark:hover:bg-pink-500/15"]},
        {variant: "ghost", color: "rose", class: ["text-rose-500 hover:bg-rose-500/5", " dark:hover:bg-rose-500/15"]},

        {size: 'xs', square: true, class: 'px-0.5 py-0.5 size-6'},
        {size: 'sm', square: true, class: 'px-1 py-1 size-7'},
        {size: 'md', square: true, class: 'px-1.5 size-8'},
        {size: 'lg', square: true, class: 'px-2 size-9'},
        {size: 'xl', square: true, class: 'px-2.5 size-10'},
    ] as any,

    defaultVariants: {
        size: 'md',
        rounded: 'lg',
        square: false,
        loading: false,
        color: 'primary',
        variant: 'primary',
    }
})
export interface ButtonProps extends VariantProps<typeof buttonVariants> {}
export default buttonVariants;

Vue Component:

<script setup lang="ts">
import {Icon} from "@/components/ui";
import {twMerge} from "tailwind-merge";
import iconVariant, {IconNameType} from "@/components/cva/icon";
import buttonVariants, {ButtonProps} from '@/components/cva/button'

interface Props {
    as?: any;
    square?: boolean;
    loading?: boolean;
    icon?: IconNameType;
    leadingIcon?: IconNameType;
    trailingIcon?: IconNameType;
    size?: ButtonProps["size"];
    color?: ButtonProps["color"];
    variant?: ButtonProps["variant"];
    rounded?: ButtonProps["rounded"];
}

const {as = 'button'} = defineProps<Props>()
</script>

<template>
    <Component :is="as" :disabled="loading" :class="twMerge(buttonVariants({square, loading, rounded, variant, color, size,}))">
        <div data-loader v-if="loading" class="absolute loading inset-0 flex items-center justify-center rounded-full loader">
            <Icon name="spinner" :class="iconVariant({class: 'animate-spin shrink-0', size})"/>
        </div>

        <template v-if="square">
            <Icon data-icon v-if="icon" :name="icon" :size="size"/>
            <slot/>
        </template>

        <template v-else>
            <Icon data-leading-icon v-if="icon" :name="icon" :size="size"/>
            <Icon data-leading-icon v-else-if="leadingIcon" :name="leadingIcon" :size="size"/>
            <span data-content v-if="$slots.default"><slot/></span>
            <Icon data-trailing-icon v-if="trailingIcon" :name="trailingIcon" :size="size"/>
        </template>
    </Component>
</template>

[joe-bell]

The issue here is that you're asserting the compoundVariants with as any

Remove this and it should work as expected

[iyashpal]

@joe-bell You're right—the IDE auto-injected that as any and I missed it. I've removed it now, but the type definitions still aren't being picked up correctly.

[iyashpal]

Strange autocomplete working on vs-code but not on jetbrains ide.