VS Code doesn't suggest hints for typed attributes from my library

I'm creating a React application using my component library and noticed that VS Code doesn't suggest hints for attributes that are typed with my custom types. Here's a simplified version of my code:

import { ProviderApp } from '@jenesei-software/jenesei-ui-react';

function LayoutRoot() {
  return (
    <ProviderApp
      defaultBgColor={""}
    >
      <Outlet />
    </ProviderApp>
  );
}

VS Code doesn't suggest possible values for the defaultBgColor attribute of the ProviderApp component, even though this attribute is typed and all types are defined in the library:

(property) ProviderAppProps.defaultBgColor: JeneseiThemeVariablesKeys

Links:

• Component Library

• ProviderApp Component Code

• Type for the defaultBgColor attribute

• Application where the library is used

• Location where ProviderApp is used in the application

What I Tried:

1. Checked the correctness of the types in the library.

2. Ensured that the types are exported correctly.

3. Configured vite.config.ts, package.json, and tsconfig.json multiple times.

What I Expected:

I expected VS Code to show Intellisense hints for defaultBgColor and other custom typed attributes, listing the possible values defined by the corresponding types. This would help in selecting valid values directly in the code editor.

How can I get VS Code to suggest possible values for defaultBgColor and other custom typed attributes?

Any help would be greatly appreciated!

Add vite-plugin-dts to your vite.config.ts and enable rollupTypes: true to generate correct type definitions and get suggestions in VS Code.

import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    dts({
      rollupTypes: true, // This solved the issue
    }),
  ],
});

I found this solution here: Stack Overflow