Unable to infer certain variants after multiple extensions (TypeScript issue)

[floatrx]

Describe the bug When extending a variantInstance multiple times using the extend, some variants properties (e.g., tag, dot) are lost.

To Reproduce Steps to reproduce the behavior:

1. Create a base variant using tailwind-variants.
2. Extend the base variant baseTagVariants to create userRoleVariants variant.
3. Extend the userRoleVariants to create a userRoleIconVariants variant.
4. Attempt to use the properties e.g. tag and dot in the final variant userRoleIconVariants.
5. See error indicating that tag and dot do not exist in the type.

Expected behavior The properties tag and dot should be available in the final extended variant.

Additional context This issue occurs only in TypeScript. The problem is demonstrated in the file src/variants.demo.ts (tv-issue). "typescript": "~5.7.2"

Repo:

tv-issue

Code:

import { tv } from 'tailwind-variants';

const baseTagVariants = tv({
  base: '',
  variants: {
    tag: {
      true: 'border-0 shadow-md font-semibold text-white',
    },
    dot: {
      true: 'size-3 rounded-full text-[0px] min-w-3 min-h-3 shadow-sm',
    },
  }
});

export const userRoleVariants = tv({
  extend: baseTagVariants,
  variants: {
    id: {
      1: 'bg-role-admin shadow-role-admin/50', // admin
      2: 'bg-role-semi-admin shadow-role-semi-admin/50', // semi-admin
      3: 'bg-role-user shadow-role-user/50', // user
    },

    // tag: { true: '' }, // <- uncomment for compatibility
  },
});

const userRoleIconVariants = tv(
  {
    extend: userRoleVariants, // extend background and shadow
    base: 'flex size-7 items-center justify-center rounded-full', // circle
  },
  {}
);

const example = userRoleIconVariants({ id: 1, dot: true });
//                                             ^^^^ -  Object literal may only specify known properties, and tag does not exist in type