@flitsmeister/design-system 3.0.2 → 3.1.0

package/icons/stroke/warning.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 4C12.6913 4 13.2498 4.55856 13.2498 5.24992L13.2499 14.2501C13.2499 14.9414 12.6914 15.5 12 15.5C11.3086 15.5 10.7501 14.9414 10.7501 14.2501L10.75 5.24992C10.75 4.55856 11.3086 4 11.9999 4ZM13.0607 19.5607C12.7794 19.842 12.3978 20 12 20C11.6022 20 11.2206 19.842 10.9393 19.5607C10.658 19.2794 10.5 18.8978 10.5 18.5C10.5 18.1022 10.658 17.7206 10.9393 17.4393C11.2206 17.158 11.6022 17 12 17C12.3978 17 12.7794 17.158 13.0607 17.4393C13.342 17.7206 13.5 18.1022 13.5 18.5C13.5 18.8978 13.342 19.2794 13.0607 19.5607Z" fill="#161616"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flitsmeister/design-system",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Flitsmeister design system — Lit web components (v3+). v2.x on npm was Vue; same package name, major bump.",
   "license": "ISC",
   "type": "module",
@@ -16,18 +16,69 @@
     "url": "https://github.com/flitsmeister/design-system-v2/issues"
   },
   "bin": {
-    "design-system-install": "scripts/install-cli.mjs",
-    "fm-ui-install": "scripts/install-cli.mjs"
+    "design-system-install": "scripts/install-cli.bundled.mjs",
+    "fm-ui-install": "scripts/install-cli.bundled.mjs"
   },
   "files": [
     "dist",
-    "scripts"
+    "scripts",
+    "styles",
+    "icons"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./tokens.css": "./styles/fm-design-system/fm-design-system.css",
+    "./tailwind.css": "./styles/fm-design-system/fm-design-system.tailwind.css",
+    "./theme.css": "./styles/fm-design-system/fm-design-system.tailwind.css",
+    "./themes/fm-design-system/fm-design-system.css": "./styles/fm-design-system/fm-design-system.css",
+    "./icons/*": "./icons/*",
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js"
+    },
+    "./vue/fm-button": {
+      "types": "./dist/vue/fm-button.d.ts",
+      "import": "./dist/vue/fm-button.js"
+    },
+    "./vue/fm-input": {
+      "types": "./dist/vue/fm-input.d.ts",
+      "import": "./dist/vue/fm-input.js"
+    },
+    "./vue/fm-dropdown": {
+      "types": "./dist/vue/fm-dropdown.d.ts",
+      "import": "./dist/vue/fm-dropdown.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./react/fm-button": {
+      "types": "./dist/react/fm-button.d.ts",
+      "import": "./dist/react/fm-button.js"
+    },
+    "./react/fm-input": {
+      "types": "./dist/react/fm-input.d.ts",
+      "import": "./dist/react/fm-input.js"
+    },
+    "./react/fm-dropdown": {
+      "types": "./dist/react/fm-dropdown.d.ts",
+      "import": "./dist/react/fm-dropdown.js"
+    },
+    "./react/fm-icon": {
+      "types": "./dist/react/fm-icon.d.ts",
+      "import": "./dist/react/fm-icon.js"
+    },
+    "./react/fm-radio-input": {
+      "types": "./dist/react/fm-radio-input.d.ts",
+      "import": "./dist/react/fm-radio-input.js"
+    },
+    "./react/fm-segmented-controller": {
+      "types": "./dist/react/fm-segmented-controller.d.ts",
+      "import": "./dist/react/fm-segmented-controller.js"
+    },
     "./fm-button": {
       "types": "./dist/fm-button/fm-button.d.ts",
       "import": "./dist/fm-button/fm-button.js"
@@ -74,11 +125,11 @@
     }
   },
   "scripts": {
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist styles/fm-design-system scripts/install-cli.bundled.mjs",
     "generate:icons": "node scripts/generate-icon-registry.js",
-    "generate:custom-elements": "custom-elements-manifest analyze --globs \"src/**/*.ts\" --outdir . && node scripts/enrich-custom-elements-manifest.js",
-    "lint": "eslint \"src/**/*.ts\"",
-    "build": "pnpm run generate:icons && tsc && node scripts/build-report.js",
+    "generate:custom-elements": "custom-elements-manifest analyze --litelement --globs \"src/fm-*/**/*.ts\" --outdir . && node scripts/enrich-custom-elements-manifest.js",
+    "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "build": "pnpm run generate:icons && tsc && node scripts/copy-package-assets.mjs && node scripts/bundle-cli.mjs && node scripts/build-report.js",
     "watch": "tsc --watch",
     "mcp:install": "npm install --prefix ../mcp",
     "mcp:build": "npm run build --prefix ../mcp",
@@ -98,20 +149,33 @@
     "lit"
   ],
   "author": "Flitsmeister",
-  "engines": {
-    "node": ">=24"
-  },
   "dependencies": {
-    "@clack/prompts": "^1.0.0",
-    "chalk": "^5.3.0",
     "lit": "^3.3.2"
   },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@clack/prompts": "^1.0.0",
     "@custom-elements-manifest/analyzer": "latest",
     "@eslint/js": "^10.0.1",
+    "@types/react": "^19.0.0",
+    "chalk": "^5.3.0",
+    "esbuild": "^0.25.0",
     "eslint": "^10.4.1",
+    "react": "^19.0.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.60.1"
+    "typescript-eslint": "^8.60.1",
+    "vue": "^3.5.0"
   },
   "customElements": "custom-elements.json"
 }

package/scripts/bundle-cli.mjs

@@ -0,0 +1,16 @@
+import Path from 'path'
+import { fileURLToPath } from 'url'
+import * as esbuild from 'esbuild'
+
+const packageRoot = Path.resolve(Path.dirname(fileURLToPath(import.meta.url)), '..')
+
+await esbuild.build({
+  absWorkingDir: packageRoot,
+  entryPoints: ['scripts/install-cli.mjs'],
+  outfile: 'scripts/install-cli.bundled.mjs',
+  bundle: true,
+  platform: 'node',
+  format: 'esm',
+  target: 'node20',
+  logLevel: 'warning'
+})

package/scripts/copy-package-assets.mjs

@@ -0,0 +1,19 @@
+import Fs from 'fs'
+import Path from 'path'
+import { fileURLToPath } from 'url'
+
+const packageRoot = Path.resolve(Path.dirname(fileURLToPath(import.meta.url)), '..')
+const sourceDir = Path.join(packageRoot, '../styles/fm-design-system')
+const destDir = Path.join(packageRoot, 'styles/fm-design-system')
+const files = ['fm-design-system.css', 'fm-design-system.tailwind.css']
+
+Fs.mkdirSync(destDir, { recursive: true })
+
+for (const file of files) {
+  const source = Path.join(sourceDir, file)
+  if (!Fs.existsSync(source)) {
+    console.error(`Token CSS not found: ${source}`)
+    process.exit(1)
+  }
+  Fs.copyFileSync(source, Path.join(destDir, file))
+}