title: How to write a TypeScript NPM package with JSX property suggestion/autocompletion for intellisense
body: <p>I created a mini UI library and published it to NPM registry. My library is written with strongly typed styled-components (TypeScript) and can be imported in React applications. It works fine when I install it using <code>npm install charge-ui</code> and works well with NextJs.</p>
  <p>Example:</p>
  <pre><code>import type { NextPage } from 'next';
  // my library
  import { Text, CallToActionButton } from &quot;charge-ui&quot;;
  
  const Home: NextPage = () =&gt; {
    return (
      &lt;div&gt;
        &lt;CallToActionButton cursorPointer&gt; Hire me &lt;/CallToActionButton&gt; &lt;br /&gt;
        &lt;Text m={1}&gt; Hello &lt;/Text&gt;
        &lt;Text m={1} className='title' fontSize='3rem'&gt; Hello &lt;/Text&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p>The problem is my <code>CallToActionButton</code> component has the following type:</p>
  <pre><code>export type CallToActionType = {
    cursorPointer?: boolean;
    width?: string;
  };
  
  export const CallToActionButton = styled.button&lt;CallToActionType&gt;`
      //some css code
  `;
  </code></pre>
  <p>but VS Code doesn't seem to detect its props. There is no suggestion/autocompletion showing up. If you take a look at <a href="https://github.com/EricEchemane/Charge-UI" rel="nofollow noreferrer">my repo</a>, the package is inside /lib folder and it has corresponding <code>*.d.ts</code> files. This also applies to other components.</p>
  <p><a href="https://i.stack.imgur.com/9tIHv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9tIHv.png" alt="enter image description here" /></a></p>
  <p>Did I miss something here? Do you have any recommendation on how to autocomplete in VS Code with my library?</p>