myoperator-ui 0.0.4 → 0.0.6

package/dist/index.js

@@ -353,14 +353,75 @@ var CSS_VARIABLES_V4 = `@import "tailwindcss";
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
 }
+`;
+var CSS_VARIABLES_V4_PREFIXED = `@import "tailwindcss/utilities" layer(utilities);
 
-* {
-  border-color: hsl(var(--border));
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 84% 4.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(222.2 84% 4.9%);
+  --radius: 0.5rem;
 }
 
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
 }
 `;
 var CSS_VARIABLES_V3 = `@tailwind base;
@@ -531,6 +592,17 @@ async function init() {
       process.exit(0);
     }
   }
+  const packageJsonPath = path2.join(cwd, "package.json");
+  let hasBootstrap = false;
+  let isESM = false;
+  if (await fs2.pathExists(packageJsonPath)) {
+    const packageJson = await fs2.readJson(packageJsonPath);
+    hasBootstrap = !!(packageJson.dependencies?.bootstrap || packageJson.devDependencies?.bootstrap);
+    isESM = packageJson.type === "module";
+    if (hasBootstrap) {
+      console.log(chalk2.blue("  \u2139 Bootstrap detected - will configure Tailwind to avoid conflicts\n"));
+    }
+  }
   const response = await prompts2([
     {
       type: "select",
@@ -546,7 +618,8 @@ async function init() {
       type: "confirm",
       name: "usePrefix",
       message: "Use a prefix for Tailwind classes? (recommended if using Bootstrap/other CSS frameworks)",
-      initial: false
+      initial: hasBootstrap
+      // Auto-set to true if Bootstrap detected
     },
     {
       type: (prev) => prev ? "text" : null,
@@ -613,7 +686,12 @@ export function cn(...inputs: ClassValue[]) {
     const componentsPath = path2.join(cwd, response.componentsPath);
     await fs2.ensureDir(componentsPath);
     const globalCssPath = path2.join(cwd, response.globalCss);
-    const cssContent = response.tailwindVersion === "v4" ? CSS_VARIABLES_V4 : CSS_VARIABLES_V3;
+    let cssContent;
+    if (response.tailwindVersion === "v4") {
+      cssContent = prefix || hasBootstrap ? CSS_VARIABLES_V4_PREFIXED : CSS_VARIABLES_V4;
+    } else {
+      cssContent = CSS_VARIABLES_V3;
+    }
     let cssUpdated = false;
     if (!await fs2.pathExists(globalCssPath)) {
       await fs2.ensureDir(path2.dirname(globalCssPath));
@@ -661,7 +739,12 @@ export function cn(...inputs: ClassValue[]) {
       }
     }
     const postcssConfigPath = path2.join(cwd, "postcss.config.js");
-    const postcssConfigContent = `module.exports = {
+    const postcssConfigContent = isESM ? `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+` : `module.exports = {
   plugins: {
     '@tailwindcss/postcss': {},
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",