TypeScript error on "using private name" or "cannot be named"

[unional]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.12

What browser are you using?

N/A (TypeScript issue)

Reproduction URL

Describe your issue

Many types in @headlessui/react are not exported.
This cause those "using private name" or "type X from module Y but cannot be named" TypeScript error very easily.

I believe that any type the is part of the public API should be exported.

If you concern the number of types exported can be overwhelming,
one way to manage them is by using namespace. For example:

export let Listbox = Object.assign(ListboxRoot, { Button, Label, Options, Option })

export namespace ListboxTypes {
  export interface ListboxButton extends HasDisplayName { ... }
  export interface ListboxLabel extends HasDisplayName { ... }
  ...
}

Another example is when using storybook (I didn't add that to the repro, but this is straight forward):

// listbox.stories.tsx
import { Listbox } from '@headlessui/react'

export default {
  // Default export of the module has or is using private name 'ComponentListbox'.
  component: Listbox  
}

[thecrypticace]

@RobinMalfait any idea why these errors don't show up in the react playground? It should basically be set up in a similar way so I would have expected them to. They definitely pop up in the provided reproduction.

[RobinMalfait]

@thecrypticace hmm, no immediate idea why this happens exactly. A few reasons I can think of but would have to dig deeper to know for sure:

• Potential differences in tsconfig.json files
• We are using the package from the monorepo, so we are using "src" like files, instead of final build files.

🤔

[thecrypticace]

Hey, we've merged #2313 which gets rid of this error. We still consider the interfaces themselves to be "internal" in a sense because we may end up changing the implementation should we come up with a nicer solution than the interfaces. Because of this we've prefixed them all with _internal_ but you shouldn't ever have to import the interfaces explicitly in your code so this shouldn't be a big issue.

It'll be available in the next release but in the meantime you can test this out using our insiders build:

npm install @headlessui/react@insiders