fix: headless ui classnames

Author: chalabi2

components/react/__tests__/__snapshots__/ModalDialog.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`ModalDialog renders correctly: portal 1`] = `
   class="modal modal-open fixed flex p-0 m-0 top-0 left-0 undefined"
   data-headlessui-state="open"
   data-open=""
-  id="headlessui-dialog-«r3m»"
+  id="headlessui-dialog-«normalized»"
   role="dialog"
   style="background-color: transparent; align-items: center; justify-content: center; height: 100vh; width: 100vw;"
   tabindex="-1"
@@ -22,7 +22,7 @@ exports[`ModalDialog renders correctly: portal 1`] = `
     class="undefined modal-box mx-auto rounded-[24px] bg-[#F4F4FF] dark:bg-[#1D192D] shadow-lg relative"
     data-headlessui-state="open"
     data-open=""
-    id="headlessui-dialog-panel-«r3t»"
+    id="headlessui-dialog-panel-«normalized»"
   >
     bound HTMLFormElement {
       "0": <button

tests/format.ts

@@ -1,7 +1,7 @@
 import { format as prettyFormat, plugins as prettyFormatPlugins } from 'pretty-format';
 
 export function formatComponent(value: any): string {
-  return prettyFormat(value, {
+  const formatted = prettyFormat(value, {
     escapeRegex: true,
     indent: 2,
     plugins: [
@@ -14,4 +14,14 @@ export function formatComponent(value: any): string {
     ],
     printFunctionName: false,
   });
+
+  // Normalize dynamic Headless UI IDs for consistent snapshots
+  return formatted
+    .replace(/headlessui-dialog-«r\w+»/g, 'headlessui-dialog-«normalized»')
+    .replace(/headlessui-dialog-panel-«r\w+»/g, 'headlessui-dialog-panel-«normalized»')
+    .replace(/headlessui-\w+-«r\w+»/g, match => {
+      // Handle other headless UI components like headlessui-menu-«rXX», etc.
+      const componentType = match.split('-')[1];
+      return `headlessui-${componentType}-«normalized»`;
+    });
 }