fix: invalid module transform for @headlessui/react (#54206)

occured since #54188

- `*`: use kebabcase instead of lowercase
- Transition: `components/transitions/transition`
- Tab: `components/tabs/tabs`

```plain
- wait compiling /not-found (client and server)...
- error ./node_modules/.pnpm/@headlessui+react@1.7.17_react-dom@18.2.0_react@18.2.0/node_modules/@headlessui/react/dist/headlessui.esm.js:2:0
Module not found: Can't resolve '/Projects/node_modules/.pnpm/@headlessui+react@1.7.17_react-dom@18.2.0_react@18.2.0/node_modules/@headlessui/react/dist/components/tab/tab'
```




Co-authored-by: Shu Ding <3676859+shuding@users.noreply.github.com>

packages/next/src/server/config.ts

@@ -722,8 +722,12 @@ function assignDefaults(
       },
     },
     '@headlessui/react': {
-      transform:
-        'modularize-import-loader?name={{member}}&join=./components/{{lowerCase member}}/{{lowerCase member}}!@headlessui/react',
+      transform: {
+        Transition:
+          'modularize-import-loader?name={{member}}&join=./components/transitions/transition!@headlessui/react',
+        Tab: 'modularize-import-loader?name={{member}}&join=./components/tabs/tabs!@headlessui/react',
+        '*': 'modularize-import-loader?name={{member}}&join=./components/{{ kebabCase member }}/{{ kebabCase member }}!@headlessui/react',
+      },
       skipDefaultConversion: true,
     },
     '@heroicons/react/20/solid': {

test/development/basic/modularize-imports.test.ts

@@ -12,6 +12,7 @@ describe('modularize-imports', () => {
       },
       dependencies: {
         'lucide-react': '0.264.0',
+        '@headlessui/react': '1.7.17',
       },
     })
   })

test/development/basic/modularize-imports/app/page.js

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   IceCream,
   BackpackIcon,
@@ -21,6 +23,8 @@ import {
   TextSelection,
 } from 'lucide-react'
 
+import { Tab, RadioGroup, Transition } from '@headlessui/react'
+
 export default function Page() {
   return (
     <>
@@ -44,6 +48,28 @@ export default function Page() {
       <Edit2 />
       <LucideEdit3 />
       <TextSelection />
+      <Tab.Group>
+        <Tab.List>
+          <Tab>Tab 1</Tab>
+          <Tab>Tab 2</Tab>
+          <Tab>Tab 3</Tab>
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>Content 1</Tab.Panel>
+          <Tab.Panel>Content 2</Tab.Panel>
+          <Tab.Panel>Content 3</Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+      <RadioGroup>
+        <RadioGroup.Label>Plan</RadioGroup.Label>
+        <RadioGroup.Option value="startup">
+          {({ checked }) => <span>{checked ? 'checked' : ''} Startup</span>}
+        </RadioGroup.Option>
+        <RadioGroup.Option value="business">
+          {({ checked }) => <span>{checked ? 'checked' : ''} Business</span>}
+        </RadioGroup.Option>
+      </RadioGroup>
+      <Transition show>I will fade in and out</Transition>
     </>
   )
 }