myoperator-ui 0.0.2 → 0.0.3

package/dist/index.js

@@ -220,7 +220,86 @@ import fs2 from "fs-extra";
 import path2 from "path";
 import prompts2 from "prompts";
 import ora2 from "ora";
-var CSS_VARIABLES = `@tailwind base;
+var CSS_VARIABLES_V4 = `@import "tailwindcss";
+
+@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;
+}
+
+: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%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+`;
+var CSS_VARIABLES_V3 = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -387,6 +466,16 @@ async function init() {
     }
   }
   const response = await prompts2([
+    {
+      type: "select",
+      name: "tailwindVersion",
+      message: "Which Tailwind CSS version are you using?",
+      choices: [
+        { title: "Tailwind CSS v4 (latest)", value: "v4" },
+        { title: "Tailwind CSS v3", value: "v3" }
+      ],
+      initial: 0
+    },
     {
       type: "text",
       name: "componentsPath",
@@ -400,7 +489,7 @@ async function init() {
       initial: "src/lib/utils.ts"
     },
     {
-      type: "text",
+      type: (prev, values) => values.tailwindVersion === "v3" ? "text" : null,
       name: "tailwindConfig",
       message: "Where is your tailwind.config.js?",
       initial: "tailwind.config.js"
@@ -444,10 +533,11 @@ 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 cssUpdated = false;
     if (!await fs2.pathExists(globalCssPath)) {
       await fs2.ensureDir(path2.dirname(globalCssPath));
-      await fs2.writeFile(globalCssPath, CSS_VARIABLES);
+      await fs2.writeFile(globalCssPath, cssContent);
       cssUpdated = true;
     } else {
       const existingCss = await fs2.readFile(globalCssPath, "utf-8");
@@ -461,30 +551,32 @@ export function cn(...inputs: ClassValue[]) {
         });
         spinner.start("Initializing project...");
         if (updateCss) {
-          await fs2.writeFile(globalCssPath, CSS_VARIABLES);
+          await fs2.writeFile(globalCssPath, cssContent);
           cssUpdated = true;
         }
       }
     }
-    const tailwindConfigPath = path2.join(cwd, response.tailwindConfig);
     let tailwindUpdated = false;
-    if (!await fs2.pathExists(tailwindConfigPath)) {
-      await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
-      tailwindUpdated = true;
-    } else {
-      const existingConfig = await fs2.readFile(tailwindConfigPath, "utf-8");
-      if (!existingConfig.includes("hsl(var(--destructive))") && !existingConfig.includes("hsl(var(--ring))")) {
-        spinner.stop();
-        const { updateTailwind } = await prompts2({
-          type: "confirm",
-          name: "updateTailwind",
-          message: `${response.tailwindConfig} exists. Update with myOperator UI theme colors?`,
-          initial: true
-        });
-        spinner.start("Initializing project...");
-        if (updateTailwind) {
-          await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
-          tailwindUpdated = true;
+    if (response.tailwindVersion === "v3" && response.tailwindConfig) {
+      const tailwindConfigPath = path2.join(cwd, response.tailwindConfig);
+      if (!await fs2.pathExists(tailwindConfigPath)) {
+        await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+        tailwindUpdated = true;
+      } else {
+        const existingConfig = await fs2.readFile(tailwindConfigPath, "utf-8");
+        if (!existingConfig.includes("hsl(var(--destructive))") && !existingConfig.includes("hsl(var(--ring))")) {
+          spinner.stop();
+          const { updateTailwind } = await prompts2({
+            type: "confirm",
+            name: "updateTailwind",
+            message: `${response.tailwindConfig} exists. Update with myOperator UI theme colors?`,
+            initial: true
+          });
+          spinner.start("Initializing project...");
+          if (updateTailwind) {
+            await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+            tailwindUpdated = true;
+          }
         }
       }
     }
@@ -529,11 +621,20 @@ export function cn(...inputs: ClassValue[]) {
     console.log("");
     console.log(chalk2.bold("  Next steps:\n"));
     console.log("  1. Install core dependencies:");
-    console.log(chalk2.cyan("     npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react tailwindcss-animate\n"));
-    console.log("  2. Install PostCSS plugin (if not already installed):");
-    console.log(chalk2.cyan("     npm install -D @tailwindcss/postcss\n"));
-    console.log("  3. Add your first component:");
-    console.log(chalk2.cyan("     npx myoperator-ui add button\n"));
+    if (response.tailwindVersion === "v4") {
+      console.log(chalk2.cyan("     npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react\n"));
+    } else {
+      console.log(chalk2.cyan("     npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react tailwindcss-animate\n"));
+    }
+    if (response.tailwindVersion === "v4") {
+      console.log("  2. Add your first component:");
+      console.log(chalk2.cyan("     npx myoperator-ui add button\n"));
+    } else {
+      console.log("  2. Install PostCSS plugin (if not already installed):");
+      console.log(chalk2.cyan("     npm install -D @tailwindcss/postcss\n"));
+      console.log("  3. Add your first component:");
+      console.log(chalk2.cyan("     npx myoperator-ui add button\n"));
+    }
   } catch (error) {
     spinner.fail("Failed to initialize project");
     console.error(error);

package/package.json

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