Chore/build configuration

README.md

@@ -83,7 +83,7 @@ If you wish the use the library's tailwind theme variables in your tailwind app.
 
 ```css
 @import tailwindcss @import
-  "../../../node_modules/@kleros/ui-components-library/dist/theme/theme.css";
+  "../../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
 ```
 
 You can find the available theme variables [here](src/styles/theme.css).

package.json

@@ -3,10 +3,10 @@
   "version": "3.1.2",
   "description": "UI components library which implements the Kleros design system.",
   "source": "./src/lib/index.ts",
-  "main": "./dist/esm/ui-components-library.js",
-  "module": "./dist/esm/ui-components-library.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/ui-components-library.d.ts",
-  "style": "./dist/esm/ui-components-library.css",
+  "style": "./dist/assets/index.css",
   "isLibrary": true,
   "type": "module",
   "browserslist": "> 0.5%, last 2 versions, not dead",
@@ -15,15 +15,17 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "import": "./dist/esm/ui-components-library.js",
+      "import": "./dist/index.js",
       "types": "./dist/ui-components-library.d.ts"
     },
-    "./style.css": "./dist/esm/ui-components-library.css",
-    "./theme.css": "./dist/theme/theme.css"
+    "./style.css": "./dist/assets/index.css",
+    "./theme.css": "./dist/assets/theme.css"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
-    "build:theme": "vite build --config vite.config.theme.js",
-    "build": "vite build && yarn build:theme",
+    "build": "vite build",
     "build-storybook": "storybook build",
     "check-style": "eslint 'src/**/*.{ts,tsx}'",
     "check-types": "tsc --noEmit",
@@ -49,6 +51,7 @@
     "@storybook/react-vite": "^8.6.4",
     "@storybook/test": "^8.6.4",
     "@tailwindcss/postcss": "^4.0.11",
+    "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^22.13.10",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
@@ -64,6 +67,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-storybook": "^0.11.4",
+    "glob": "^11.0.1",
     "globals": "^16.0.0",
     "husky": "^7.0.0",
     "lint-staged": "^12.1.2",
@@ -74,6 +78,8 @@
     "tailwindcss": "^4.0.11",
     "typescript": "^5.8.2",
     "vite": "^6.2.1",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
@@ -85,7 +91,6 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.7.0",
-    "@tailwindcss/vite": "^4.0.12",
     "bignumber.js": "^9.1.2",
     "clsx": "^2.1.1",
     "react": "^18.0.0",
@@ -96,8 +101,7 @@
     "simplebar-react": "^2.3.6",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-react-aria-components": "^2.0.0",
-    "usehooks-ts": "^2.9.1",
-    "vite-plugin-dts": "^4.5.3"
+    "usehooks-ts": "^2.9.1"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",

src/lib/breadcrumb.tsx

@@ -4,7 +4,7 @@ import { Button } from "react-aria-components";
 import { clsx } from "clsx";
 
 interface BreadcrumbProps {
-  items: { text: string; value: any }[];
+  items: { text: React.ReactNode; value: any }[];
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   callback?: Function;
   clickable?: boolean;

vite.config.ts

@@ -1,10 +1,13 @@
-import { resolve } from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import svgr from "vite-plugin-svgr";
 // eslint-disable-next-line import/no-unresolved
 import tailwindcss from "@tailwindcss/vite";
 import dts from "vite-plugin-dts";
+import { libInjectCss } from "vite-plugin-lib-inject-css";
+import { extname, relative, resolve } from "path";
+import { fileURLToPath } from "node:url";
+import { glob } from "glob";
 
 export default defineConfig({
   build: {
@@ -17,9 +20,27 @@ export default defineConfig({
       // make sure to externalize deps that shouldn't be bundled
       // into your library
       external: ["react", "react-dom"],
+      input: Object.fromEntries(
+        glob
+          .sync("src/lib/**/*.{ts,tsx}", {
+            ignore: ["src/lib/**/*.d.ts"],
+          })
+          .map((file) => [
+            // The name of the entry point
+            // lib/nested/foo.ts becomes nested/foo
+            relative(
+              "src/lib",
+              file.slice(0, file.length - extname(file).length),
+            ),
+            // The absolute path to the entry file
+            // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
+            fileURLToPath(new URL(file, import.meta.url)),
+          ]),
+      ),
       output: {
-        dir: "dist/esm",
-        preserveModules: true,
+        assetFileNames: "assets/[name][extname]",
+        entryFileNames: "[name].js",
+
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
@@ -35,6 +56,7 @@ export default defineConfig({
     }),
     tailwindcss(),
     react(),
+    libInjectCss(),
     dts({
       insertTypesEntry: true,
       include: ["src/lib", "src/global.d.ts"],