fix(convertUtilitiesToV4): drop js-regexp-lookbehind for improved browser support (#1555)

* refactor(ui~convertUtilitiesToV4): drop `js-regexp-lookbehind` in favor of more simpler regex for improved browser support

* chore: remove invalid mdx frontmatter field

* chore: add changeset

Author: SutuSebastian

.changeset/open-toys-sniff.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+refactor(ui~convertUtilitiesToV4): drop `js-regexp-lookbehind` in favor of more simpler regex for improved browser support

apps/web/content/docs/getting-started/ai-integration.mdx

@@ -1,7 +1,6 @@
 ---
 title: AI and LLM Integration with Flowbite React
 description: Learn how to integrate Flowbite React with AI models, LLMs, and chatbots using our specialized documentation routes and markdown accessibility features
-keywords: AI integration, LLM integration, React AI, AI documentation, ChatGPT integration, AI components, language models, machine learning, documentation API, markdown API
 ---
 
 Flowbite React provides powerful, built-in support for AI and Large Language Model (LLM) integration through specialized routes that expose documentation in machine-readable formats. These features enable seamless integration with ChatGPT, Claude, and other AI assistants.

packages/ui/src/helpers/convert-utilities-to-v4.ts

@@ -18,11 +18,29 @@ export function convertUtilitiesToV4(classNames: string): string {
     return cacheValue;
   }
 
-  let result = classNames;
+  const parts = classNames.split(/(\s+)/);
+  const result = parts
+    .map((part) => {
+      if (/^\s+$/.test(part)) {
+        return part;
+      }
 
-  for (const [regex, replacement] of regexMap) {
-    result = result.replace(regex, replacement);
-  }
+      const processed = part;
+      const modifierMatch = processed.match(/^([^:]+:)?(.+)$/);
+
+      if (modifierMatch) {
+        const [, modifier = "", baseClass] = modifierMatch;
+
+        for (const [regex, replacement] of regexMap) {
+          if (regex.test(baseClass)) {
+            return modifier + baseClass.replace(regex, replacement);
+          }
+        }
+      }
+
+      return processed;
+    })
+    .join("");
 
   cache.set(cacheKey, result);
 
@@ -44,15 +62,15 @@ export function convertUtilitiesToV4(classNames: string): string {
 | ring           | ring-3         |
  */
 const regexMap = [
-  [/\b(shadow-sm)\b/g, "shadow-xs"],
-  [/(?<!-)(shadow)(?!-)\b/g, "shadow-sm"],
-  [/\b(drop-shadow-sm)\b/g, "drop-shadow-xs"],
-  [/\b(drop-shadow)\b(?!-)/g, "drop-shadow-sm"],
-  [/\b(blur-sm)\b/g, "blur-xs"],
-  [/\b(blur)\b(?!-)/g, "blur-sm"],
-  [/\b(rounded-sm)\b/g, "rounded-xs"],
-  [/\b(rounded)\b(?!-)/g, "rounded-sm"],
+  [/^shadow-sm$/, "shadow-xs"],
+  [/^shadow$/, "shadow-sm"],
+  [/^drop-shadow-sm$/, "drop-shadow-xs"],
+  [/^drop-shadow$/, "drop-shadow-sm"],
+  [/^blur-sm$/, "blur-xs"],
+  [/^blur$/, "blur-sm"],
+  [/^rounded-sm$/, "rounded-xs"],
+  [/^rounded$/, "rounded-sm"],
   // TODO: revisit this - it breaks anything focused using tab
-  // [/\b(outline-none)\b/g, "outline-hidden"],
-  [/\b(ring)\b(?!-)/g, "ring-3"],
+  // [/^outline-none$/, "outline-hidden"],
+  [/^ring$/, "ring-3"],
 ] as const;