Setup vite config and package json

package-lock.json

@@ -1,15 +1,12 @@
 {
-  "name": "concise-ui",
+  "name": "@icfm/concise-ui",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "concise-ui",
+      "name": "@icfm/concise-ui",
       "version": "0.0.0",
-      "dependencies": {
-        "vue": "^3.5.40"
-      },
       "devDependencies": {
         "@tsconfig/node24": "^24.0.4",
         "@types/jsdom": "^28.0.3",
@@ -32,11 +29,15 @@
         "vite": "^8.1.5",
         "vite-plugin-vue-devtools": "^8.1.5",
         "vitest": "^4.1.10",
+        "vue": "^3.5.40",
         "vue-eslint-parser": "^10.4.1",
         "vue-tsc": "^3.3.7"
       },
       "engines": {
         "node": "^22.18.0 || >=24.12.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
       }
     },
     "node_modules/@asamuzakjp/css-color": {
@@ -370,6 +371,7 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
       "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -379,6 +381,7 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
       "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -412,6 +415,7 @@
       "version": "7.29.8",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
       "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.8"
@@ -576,6 +580,7 @@
       "version": "7.29.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
       "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.29.7",
@@ -1004,6 +1009,7 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -2297,6 +2303,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.40.tgz",
       "integrity": "sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.7",
@@ -2310,6 +2317,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz",
       "integrity": "sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.5.40",
@@ -2320,6 +2328,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.40.tgz",
       "integrity": "sha512-gIf497P4kpuALcvs5n3AEg1Vdn0pSY4XbjASIfHNYF1/MP3T2Mf2STERTubysBxCRxzJGJYtF/O7vwJrxFB3Vw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.7",
@@ -2337,6 +2346,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.40.tgz",
       "integrity": "sha512-rrE5xiXG663+vHCHa3J9p2z5OcBRjXmoqenprJxAFQxg5pSshzeBiCE6pu46axapRJ2Adk0YDA2BRZVjiHXnhg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.40",
@@ -2439,6 +2449,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.40.tgz",
       "integrity": "sha512-B7ot9UlUZOi1zbq61/LvE88ZLTV8IlajTdiZTAEiDQgrnIMIZoPr9kGw0Zw46ObW62O9+H/Be3kMbfb7kYPQZA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/shared": "3.5.40"
@@ -2448,6 +2459,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.40.tgz",
       "integrity": "sha512-KAZLweuZ6uUJPK1PMSQPgBU5gCjgrrfjUhSglmU9NhH+Zjepa8cnwSydPWDWHDwOgY4g3VcZ+PljbiHlURNCbw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.40",
@@ -2458,6 +2470,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.40.tgz",
       "integrity": "sha512-ZfrX8ssZQds900L9pr8AuK05ddnMsR4MPMZr8cPN9GoqoPWcXLhjvvbIA2SMv+7a97sJ1vv9pj/zxK0Cq/eEFQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.40",
@@ -2470,6 +2483,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.40.tgz",
       "integrity": "sha512-XNJym9WpevhTVt1HuwOrCRJ5Q+9z4BjTMrDtjTrvx74SmUll8spNTw6whWJa9mEkO4PKn5TihI/bm/8ds2QVJw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-ssr": "3.5.40",
@@ -2481,6 +2495,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.40.tgz",
       "integrity": "sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@vue/test-utils": {
@@ -2877,6 +2892,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -3055,6 +3071,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -3339,6 +3356,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/esutils": {
@@ -4263,6 +4281,7 @@
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -4362,6 +4381,7 @@
       "version": "3.3.16",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
       "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4741,6 +4761,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -4773,6 +4794,7 @@
       "version": "8.5.25",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.25.tgz",
       "integrity": "sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5095,6 +5117,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -5407,7 +5430,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -5855,6 +5878,7 @@
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.40.tgz",
       "integrity": "sha512-+8PJ4SJXdn/cHGImF4CKdxlWHIN5Dkt7DoufRREM6h6uVCx2m7QxgcEQmmzyOK8A9mcafg7sFbJFYsdFVubTig==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.40",

package.json

@@ -1,23 +1,49 @@
 {
-  "name": "concise-ui",
+  "name": "@icfm/concise-ui",
   "version": "0.0.0",
-  "private": true,
+  "description": "A concise Vue 3 UI component library.",
   "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/concise-ui.umd.cjs",
+  "module": "./dist/concise-ui.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/concise-ui.js",
+      "require": "./dist/concise-ui.umd.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "component-library"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-s type-check build-only build:types",
+    "prepublishOnly": "npm run build",
     "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",
+    "build:types": "vue-tsc -p tsconfig.lib.json",
     "type-check": "vue-tsc --build",
     "lint": "run-s \"lint:*\"",
     "lint:oxlint": "oxlint . --fix",
     "lint:eslint": "eslint . --fix --cache",
     "format": "prettier --write --experimental-cli src/"
   },
-  "dependencies": {
-    "vue": "^3.5.40"
-  },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
     "@types/jsdom": "^28.0.3",
@@ -40,9 +66,13 @@
     "vite": "^8.1.5",
     "vite-plugin-vue-devtools": "^8.1.5",
     "vitest": "^4.1.10",
+    "vue": "^3.5.40",
     "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "^3.3.7"
   },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"
   }

src/index.ts

@@ -0,0 +1,2 @@
+// Public exports for Concise UI belong here.
+export {}

tsconfig.lib.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["env.d.ts", "src/index.ts", "src/**/*.vue"],
+  "exclude": ["src/__tests__/**", "src/App.vue", "src/main.ts"],
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.lib.tsbuildinfo"
+  }
+}

vite.config.ts

@@ -4,15 +4,30 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
-// https://vite.dev/config/
+export default defineConfig(({ command }) => ({
-export default defineConfig({
+  plugins: [vue(), ...(command === 'serve' ? [vueDevTools()] : [])],
-  plugins: [
-    vue(),
-    vueDevTools(),
-  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
-})
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
+      name: 'ConciseUI',
+      formats: ['es', 'umd'],
+      fileName: (format) =>
+        format === 'es' ? 'concise-ui.js' : 'concise-ui.umd.cjs',
+      cssFileName: 'concise-ui',
+    },
+    rolldownOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+}))