feat: fix TypeScript declarations generation with tsup

package.json

@@ -44,6 +44,7 @@
     "postcss": "^8.4.35",
     "prettier": "^3.5.3",
     "tailwindcss": "^3.4.1",
+    "tsup": "^8.5.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^5.1.4",

packages/ui-kit/README.md

@@ -80,6 +80,7 @@ This package is optimized for use by AI coding agents. We provide specialized do
 ### For Human Developers
 
 - **[📚 Storybook Documentation](https://ui-kit-storybook-url)** - Interactive component explorer
+- **[🎯 Select Component Guide](../../docs/select-component-guide.md)** - Complete guide for using the Select component
 - **[🎨 Design System](./src/docs/)** - Design tokens, patterns, and guidelines
 - **[🔧 Development Guide](./docs/development.md)** - Contributing and development setup
 

packages/ui-kit/package.json

@@ -3,16 +3,16 @@
   "version": "0.2.1",
   "type": "module",
   "license": "Apache-2.0",
-  "main": "./dist/ui-kit.umd.cjs",
-  "module": "./dist/ui-kit.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/ui-kit.js",
-      "require": "./dist/ui-kit.umd.cjs"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/index.css"
   },
   "files": [
     "dist/**"
@@ -23,7 +23,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc --declaration --emitDeclarationOnly --outDir dist && vite build",
+    "build": "tsup",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest run",
@@ -90,14 +90,14 @@
   "size-limit": [
     {
       "name": "ES Module Bundle",
-      "path": "dist/ui-kit.js",
-      "limit": "500 KB",
+      "path": "dist/index.js",
+      "limit": "400 KB",
       "gzip": true
     },
     {
-      "name": "UMD Bundle",
-      "path": "dist/ui-kit.umd.cjs",
-      "limit": "500 KB",
+      "name": "CommonJS Bundle",
+      "path": "dist/index.cjs",
+      "limit": "950 KB",
       "gzip": true
     }
   ],
@@ -151,6 +151,7 @@
     "size-limit": "^11.2.0",
     "storybook": "^8.6.14",
     "tailwindcss": "^3.4.17",
+    "tsup": "^8.5.0",
     "typescript-eslint": "^8.32.1",
     "vite": "^5.4.19",
     "vitest": "^1.6.1",

packages/ui-kit/tsup.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ["react", "react-dom"],
+  noExternal: ["nanoid"],
+  minify: false,
+  target: "es2020",
+  outDir: "dist",
+  platform: "browser",
+  esbuildOptions: (options) => {
+    options.jsx = "automatic";
+    options.jsxImportSource = "react";
+    // Define globals for browser compatibility
+    options.define = {
+      global: "globalThis",
+      "process.env.NODE_ENV": '"production"',
+    };
+  },
+  banner: {
+    js: '"use client";',
+  },
+  splitting: false,
+  treeshake: true,
+  // Keep CSS separate
+  injectStyle: false,
+  // Don't bundle CSS with JS
+  onSuccess:
+    'echo "✅ TypeScript library built successfully with declarations!"',
+});

packages/ui-kit/vite.config.ts

@@ -1,33 +1,36 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { resolve } from 'path'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
 
 export default defineConfig({
-    plugins: [
-        react({
-            jsxRuntime: 'automatic',
-            jsxImportSource: 'react',
-        })
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, './src')
-        }
+  plugins: [
+    react({
+      jsxRuntime: "automatic",
+      jsxImportSource: "react",
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
     },
-    build: {
-        lib: {
-            entry: resolve(__dirname, 'src/index.ts'),
-            name: 'UIKit',
-            fileName: 'ui-kit'
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "UIKit",
+      fileName: "ui-kit",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
         },
-        rollupOptions: {
-            external: ['react', 'react-dom'],
-            output: {
-                globals: {
-                    react: 'React',
-                    'react-dom': 'ReactDOM'
-                }
-            }
-        }
-    }
-}) 
+      },
+    },
+  },
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+});