Prefix support

.github/actions/setup/action.yml

@@ -5,9 +5,9 @@ runs:
   using: composite
   steps:
     - name: Setup Bun
-      uses: oven-sh/setup-bun@v1
+      uses: oven-sh/setup-bun@v2
       with:
-        bun-version: 1.1.21
+        bun-version: 1.1.32
 
     - name: Setup Node
       uses: actions/setup-node@v4

apps/storybook/tailwind.config.cjs

@@ -1,8 +1,11 @@
+const flowbite = require("../../packages/ui/src/tailwind");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: ["../../packages/ui/src/**/*.{ts,tsx}"],
   theme: {
     extend: {},
   },
-  plugins: [require("flowbite/plugin")],
+  plugins: [flowbite],
 };

apps/web/components/code-demo.tsx

@@ -144,7 +144,7 @@
         </div>
       </div>
       <CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode} iframe={data.iframe}>
-        {data.iframe ? <IFrame data={data} isRTL={isRTL} isDarkMode={isDarkMode} /> : data.component}
+        {data.iframe ? <IFrame data={data} isRTL={isRTL} isDarkMode={isDarkMode} /> : <>{data.component}</>}
       </CodePreview>
       <div className="code-syntax-wrapper">
         <div
@@ -247,7 +247,7 @@
     <div {...(isRTL && { dir: "rtl" })} className="code-preview-wrapper">
       <div className="flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
         <div
           className={twMerge("code-responsive-wrapper w-full", isDarkMode !== null && (isDarkMode ? "dark" : "light"))}
         >
           <div
             className={twMerge(
@@ -274,7 +274,7 @@
       href={href}
       target="_blank"
       rel="nofollow noopener noreferrer"
       className="inline-flex w-fit items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-center text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-700"
     >
       <svg
         aria-hidden
@@ -309,7 +309,7 @@
         <Tooltip key={v.name} content={v.title}>
           <button
             onClick={() => onSelect(v.name)}
             className="flex size-9 items-center justify-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-700 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-500"
           >
             <span className="sr-only">{v.title}</span>
             <v.icon className="size-4" />

apps/web/content/docs/customize/theme.mdx

@@ -43,7 +43,7 @@ const customTheme: CustomFlowbiteTheme = {
 
 export default function MyPage() {
   return (
-    <Flowbite theme={{ theme: customTheme }}>
+    <Flowbite theme={customTheme}>
       <Button color="primary">Click me</Button>
     </Flowbite>
   );

apps/web/examples/megaMenu/megaMenu.root.tsx

@@ -6,7 +6,6 @@ import {
   NavbarCollapse,
   NavbarLink,
   NavbarToggle,
-  theme,
 } from "flowbite-react";
 import { type CodeData } from "~/components/code-demo";
 
@@ -112,11 +111,11 @@ function Component() {
 `;
 
 const codeRSC = `
-import { 
-  Button, 
-  MegaMenu, 
-  MegaMenuDropdown, 
-  Navbar, 
+import {
+  Button,
+  MegaMenu,
+  MegaMenuDropdown,
+  Navbar,
   NavbarBrand,
   NavbarCollapse,
   NavbarLink,

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/web/next.config.js

@@ -2,8 +2,6 @@ const { withContentlayer } = require("next-contentlayer2");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
   images: {
     remotePatterns: [
       {

apps/web/package.json

@@ -14,32 +14,32 @@
     "typecheck": "contentlayer2 build && tsc --noEmit"
   },
   "dependencies": {
-    "contentlayer2": "0.5.0",
+    "contentlayer2": "0.5.1",
     "flowbite-react": "workspace:*",
     "react-icons": "5.2.1",
-    "tailwind-merge": "2.4.0"
+    "tailwind-merge": "2.5.4"
   },
   "devDependencies": {
-    "@docsearch/react": "3.6.1",
+    "@docsearch/react": "3.6.2",
     "@types/mdx": "2.0.13",
     "@types/prismjs": "1.26.4",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",
-    "eslint-config-next": "14.2.5",
+    "eslint-config-next": "14.2.15",
     "markdown-toc": "1.2.0",
-    "next": "14.2.5",
-    "next-contentlayer2": "0.5.0",
-    "postcss": "8.4.41",
+    "next": "14.2.15",
+    "next-contentlayer2": "0.5.1",
+    "postcss": "8.4.47",
     "prismjs": "1.29.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-markdown": "9.0.1",
     "rehype-autolink-headings": "7.1.0",
     "rehype-prism-plus": "2.0.0",
     "rehype-slug": "6.0.0",
-    "sharp": "0.33.4",
-    "tailwindcss": "3.4.7",
+    "sharp": "0.33.5",
+    "tailwindcss": "3.4.14",
     "typescript": "5.5.4"
   }
 }

apps/web/tailwind.config.cjs

@@ -8,7 +8,6 @@ module.exports = {
     "./components/**/*.{js,jsx,md,mdx,ts,tsx}",
     "./data/**/*.{js,jsx,ts,tsx}",
     "./examples/**/*.{js,jsx,ts,tsx}",
-    flowbite.content({ base: "../../" }),
   ],
   theme: {
     extend: {
@@ -91,5 +90,5 @@ module.exports = {
       ],
     },
   },
-  plugins: [flowbite.plugin()],
+  plugins: [flowbite],
 };

package.json

@@ -31,20 +31,20 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.5.0",
-    "@changesets/cli": "2.27.7",
+    "@changesets/cli": "2.27.9",
     "@ianvs/prettier-plugin-sort-imports": "4.3.1",
-    "@types/bun": "1.1.6",
-    "@types/web": "0.0.153",
+    "@types/bun": "1.1.12",
+    "@types/web": "0.0.175",
     "clean-package": "2.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-tailwindcss": "3.17.4",
-    "npm-check-updates": "17.0.3",
+    "eslint-plugin-tailwindcss": "3.17.5",
+    "npm-check-updates": "17.1.6",
     "prettier": "3.3.3",
-    "prettier-plugin-packagejson": "2.5.1",
-    "prettier-plugin-tailwindcss": "0.6.5",
+    "prettier-plugin-packagejson": "2.5.3",
+    "prettier-plugin-tailwindcss": "0.6.8",
     "rimraf": "6.0.1",
-    "turbo": "2.0.12"
+    "turbo": "2.2.3"
   },
-  "packageManager": "[email protected].21"
+  "packageManager": "[email protected].33"
 }

packages/cli/package.json

@@ -46,14 +46,14 @@
   "dependencies": {
     "@clack/prompts": "0.7.0",
     "arg": "5.0.2",
-    "execa": "9.3.0",
-    "ora": "8.0.1",
-    "picocolors": "1.0.1",
+    "execa": "9.4.1",
+    "ora": "8.1.0",
+    "picocolors": "1.1.1",
     "rimraf": "6.0.1"
   },
   "devDependencies": {
-    "tsup": "8.2.4",
-    "typescript": "5.5.4"
+    "tsup": "8.3.5",
+    "typescript": "5.6.3"
   },
   "engines": {
     "node": ">=18.0.0"

packages/ui/.gitignore

@@ -1,2 +1,3 @@
 coverage
 dist
+src/tailwind/class-list.ts

packages/ui/package.json

@@ -19,21 +19,78 @@
     "directory": "packages/ui"
   },
   "license": "MIT",
+  "sideEffects": false,
+  "type": "commonjs",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/cjs/index.cjs"
+      "import": {
+        "types": "./dist/types/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      }
     },
     "./components/*": {
-      "types": "./dist/types/components/*/index.d.ts",
-      "import": "./dist/esm/components/*/index.mjs",
-      "require": "./dist/cjs/components/*/index.cjs"
+      "import": {
+        "types": "./dist/types/components/*/index.d.mts",
+        "default": "./dist/esm/components/*/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/components/*/index.d.ts",
+        "default": "./dist/cjs/components/*/index.cjs"
+      }
+    },
+    "./helpers/*": {
+      "import": {
+        "types": "./dist/types/helpers/*.d.mts",
+        "default": "./dist/esm/helpers/*.mjs"
+      },
+      "require": {
+        "types": "./dist/types/helpers/*.d.ts",
+        "default": "./dist/cjs/helpers/*.cjs"
+      }
+    },
+    "./hooks/*": {
+      "import": {
+        "types": "./dist/types/hooks/*.d.mts",
+        "default": "./dist/esm/hooks/*.mjs"
+      },
+      "require": {
+        "types": "./dist/types/hooks/*.d.ts",
+        "default": "./dist/cjs/hooks/*.cjs"
+      }
+    },
+    "./tailwind/*": {
+      "import": {
+        "types": "./dist/types/tailwind/*.d.mts",
+        "default": "./dist/esm/tailwind/*.mjs"
+      },
+      "require": {
+        "types": "./dist/types/tailwind/*.d.ts",
+        "default": "./dist/cjs/tailwind/*.cjs"
+      }
     },
     "./tailwind": {
-      "types": "./dist/types/tailwind.d.ts",
-      "import": "./dist/esm/tailwind.mjs",
-      "require": "./dist/cjs/tailwind.cjs"
+      "import": {
+        "types": "./dist/types/tailwind/index.d.mts",
+        "default": "./dist/esm/tailwind/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/tailwind/index.d.ts",
+        "default": "./dist/cjs/tailwind/index.cjs"
+      }
+    },
+    "./theme": {
+      "import": {
+        "types": "./dist/types/theme/index.d.mts",
+        "default": "./dist/esm/theme/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/theme/index.d.ts",
+        "default": "./dist/cjs/theme/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -45,13 +102,15 @@
   ],
   "scripts": {
     "build": "bun --bun rollup -c",
-    "clean": "rimraf .turbo coverage dist node_modules tsconfig.tsbuildinfo",
+    "clean": "rimraf .turbo coverage dist node_modules src/tailwind/class-list.ts tsconfig.tsbuildinfo",
     "dev": "bun run build --watch",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
+    "generate-classlist": "bun scripts/generate-classlist.mts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepack": "clean-package",
+    "prepare": "bun run generate-classlist",
     "prepublishOnly": "bun run build",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -62,9 +121,9 @@
     "@floating-ui/react": "0.26.21",
     "classnames": "2.5.1",
     "debounce": "2.1.0",
-    "flowbite": "2.5.1",
+    "deepmerge-ts": "7.1.3",
     "react-icons": "5.2.1",
-    "tailwind-merge": "2.4.0"
+    "tailwind-merge": "2.5.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.8",
@@ -76,12 +135,13 @@
     "@typescript-eslint/parser": "8.0.1",
     "@vitejs/plugin-react": "4.3.1",
     "@vitest/coverage-v8": "2.0.5",
+    "acorn": "8.12.1",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vitest": "0.5.4",
-    "fast-glob": "3.3.2",
+    "estree-walker": "3.0.3",
     "jsdom": "24.1.1",
-    "rollup": "4.20.0",
+    "rollup": "4.24.0",
     "rollup-plugin-esbuild": "6.1.1",
     "rollup-plugin-use-client": "1.4.0",
     "typescript": "5.5.4",