working build

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "lib",
+  "name": "ui-kit",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -9,6 +9,22 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./css": "./dist/style.css"
+  },
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/components/button.tsx

@@ -3,5 +3,6 @@ import { ComponentPropsWithoutRef } from "react";
 type Props = ComponentPropsWithoutRef<"button">;
 
 export function Button(props: Props) {
+  console.log("button");
   return <button {...props}>Hello World</button>;
 }

vite.config.ts

@@ -1,12 +1,15 @@
+import { join, resolve } from "node:path";
 import react from "@vitejs/plugin-react-swc";
-import { resolve, join } from "path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
 import { dependencies, devDependencies } from "./package.json";
-// https://vitejs.dev/config/
+
 export default defineConfig({
-  plugins: [react(), dts({ rollupTypes: true })],
+  plugins: [
+    react(),
+    dts({ rollupTypes: true }), // Output .d.ts files
+  ],
   build: {
     target: "esnext",
     minify: false,
@@ -14,25 +17,18 @@ export default defineConfig({
       entry: resolve(__dirname, join("src", "index.ts")),
       fileName: "index",
       formats: ["es", "cjs"],
-      name: "internship-lib",
     },
     rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
+      // Exclude peer dependencies from the bundle to reduce bundle size
-      // into your library
       external: [
-        ...Object.keys(devDependencies),
         ...Object.keys(dependencies),
+        ...Object.keys(devDependencies),
         "react/jsx-runtime",
       ],
       output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          react: "React",
-        },
         dir: "dist",
-        entryFileNames: "[name].js",
+        entryFileNames: "[name].cjs",
-        format: "es",
+        format: "cjs",
       },
     },
   },