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.30
 
     - name: Setup Node
       uses: actions/setup-node@v4

apps/storybook/tailwind.config.cjs

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

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/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/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.11",
+    "@types/web": "0.0.173",
     "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.4",
     "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.1.3"
   },
-  "packageManager": "[email protected].21"
+  "packageManager": "[email protected].30"
 }

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.0",
+    "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,68 @@
     "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"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -45,13 +92,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 +111,8 @@
     "@floating-ui/react": "0.26.21",
     "classnames": "2.5.1",
     "debounce": "2.1.0",
-    "flowbite": "2.5.1",
     "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 +124,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",

packages/ui/rollup.config.mjs

@@ -1,15 +1,14 @@
-import { $ } from "bun";
-import glob from "fast-glob";
+import { $, Glob } from "bun";
 import { rimraf } from "rimraf";
 import esbuild from "rollup-plugin-esbuild";
 import { rollupPluginUseClient } from "rollup-plugin-use-client";
 import packageJson from "./package.json";
 
-const componentEntries = await glob("src/components/**/index.ts");
-const entries = ["src/index.ts", "src/tailwind.ts", ...componentEntries];
+const componentEntries = await Array.fromAsync(new Glob("src/components/**/index.ts").scan());
+const entries = ["src/index.ts", "src/tailwind/index.ts", ...componentEntries];
 const external = [
-  "flowbite/plugin",
   "react/jsx-runtime",
+  "tailwindcss/plugin",
   new RegExp("react-icons/*"),
   ...Object.keys({
     ...packageJson.dependencies,
@@ -42,6 +41,7 @@ export default {
   external,
   plugins: [
     cleanOutputDir(),
+    generateClassList(),
     esbuild({
       sourceMap: false,
     }),
@@ -54,22 +54,47 @@ export default {
     }
     warn(warning);
   },
+  watch: {
+    exclude: "src/tailwind/class-list.ts",
+  },
 };
 
 function cleanOutputDir() {
   return {
     name: "clean-output-dir",
     async buildStart() {
       await rimraf(outputDir);
+      await $`mkdir ${outputDir}`;
+    },
+  };
+}
+
+function generateClassList() {
+  return {
+    name: "generate-classlist",
+    async buildStart() {
+      await $`bun run generate-classlist`;
     },
   };
 }
 
 function generateDts() {
   return {
     name: "generate-dts",
-    async closeBundle() {
+    async buildStart() {
+      // generate `.d.ts` files
       await $`tsc -p tsconfig.build.json --outDir ${outputDir}/types`;
+
+      // generate `.d.mts` files
+      for await (const path of new Glob(`${outputDir}/types/**/*.d.ts`).scan()) {
+        const file = Bun.file(path);
+        const content = await file.text();
+
+        await Bun.write(path.replace(".d.ts", ".d.mts"), content);
+        // fix incorrect default export
+        // https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FalseExportDefault.md
+        await Bun.write(path, content.replace("export default _default", "export = _default"));
+      }
     },
   };
 }