@quarklab/rad-ui 0.2.0 → 0.3.0

package/dist/index.js

@@ -7,7 +7,7 @@ import { Command } from "commander";
 import path3 from "path";
 import fs3 from "fs-extra";
 import * as p from "@clack/prompts";
-import chalk3 from "chalk";
+import chalk2 from "chalk";
 
 // src/utils/detect-project.ts
 import path from "path";
@@ -34,6 +34,76 @@ async function detectPackageManager(cwd) {
   if (await fs.pathExists(path.resolve(cwd, "yarn.lock"))) return "yarn";
   return "npm";
 }
+async function detectTailwindVersion(cwd, cssPath) {
+  const pkgPath = path.resolve(cwd, "package.json");
+  if (await fs.pathExists(pkgPath)) {
+    try {
+      const pkg = await fs.readJson(pkgPath);
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+      const twVersion = allDeps["tailwindcss"];
+      if (twVersion) {
+        const cleanVersion = twVersion.replace(/^[\^~>=<]+/, "");
+        if (cleanVersion.startsWith("4")) return "v4";
+        if (cleanVersion.startsWith("3")) return "v3";
+      }
+    } catch {
+    }
+  }
+  if (cssPath) {
+    const fullCssPath = path.resolve(cwd, cssPath);
+    if (await fs.pathExists(fullCssPath)) {
+      try {
+        const cssContent = await fs.readFile(fullCssPath, "utf-8");
+        if (cssContent.includes('@import "tailwindcss"') || cssContent.includes("@import 'tailwindcss'")) {
+          return "v4";
+        }
+        if (cssContent.includes("@tailwind base")) {
+          return "v3";
+        }
+      } catch {
+      }
+    }
+  }
+  const configFiles = [
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "tailwind.config.cjs",
+    "tailwind.config.mjs"
+  ];
+  for (const file of configFiles) {
+    if (await fs.pathExists(path.resolve(cwd, file))) {
+      return "v3";
+    }
+  }
+  return "v4";
+}
+async function detectSrcDir(cwd) {
+  const tsconfigPath = path.resolve(cwd, "tsconfig.json");
+  if (await fs.pathExists(tsconfigPath)) {
+    try {
+      const raw = await fs.readFile(tsconfigPath, "utf-8");
+      const cleaned = raw.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+      const tsconfig = JSON.parse(cleaned);
+      const paths = tsconfig?.compilerOptions?.paths;
+      if (paths) {
+        const aliasKey = Object.keys(paths).find(
+          (k) => k === "@/*" || k === "~/*"
+        );
+        if (aliasKey) {
+          const aliasTargets = paths[aliasKey];
+          if (Array.isArray(aliasTargets) && aliasTargets.length > 0) {
+            const target = aliasTargets[0].replace(/^\.\//, "").replace(/\/\*$/, "");
+            if (target) return target;
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  if (await fs.pathExists(path.resolve(cwd, "src"))) return "src";
+  if (await fs.pathExists(path.resolve(cwd, "app"))) return "app";
+  return "src";
+}
 function getDefaultCssPath(projectType) {
   switch (projectType) {
     case "nextjs":
@@ -72,7 +142,7 @@ async function readConfig(cwd) {
   const exists = await fs2.pathExists(configPath);
   if (!exists) {
     throw new Error(
-      `Configuration file not found. Run ${chalk("rad-ui init")} first.`
+      `Configuration file not found. Run \`rad-ui init\` first.`
     );
   }
   return fs2.readJson(configPath);
@@ -81,19 +151,19 @@ async function writeConfig(cwd, config) {
   const configPath = getConfigPath(cwd);
   await fs2.writeJson(configPath, config, { spaces: 2 });
 }
-function chalk(text2) {
-  return `\`${text2}\``;
+function resolveAlias(alias, srcDir) {
+  return alias.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/");
 }
 function resolveComponentsDir(cwd, config) {
-  const aliasPath = config.aliases.components.replace(/^@\//, "src/");
-  return path2.resolve(cwd, aliasPath);
+  const relPath = resolveAlias(config.aliases.components, config.srcDir);
+  return path2.resolve(cwd, relPath);
 }
 
 // src/registry/themes.ts
 var themes = [
   {
     name: "kahgel",
-    label: "Kahgel (\u06A9\u0627\u0647\u06AF\u0644) \u2014 Warm Clay",
+    label: "Kahgel \u2014 Warm Clay",
     cssVars: {
       light: {
         "--background": "40 20% 98%",
@@ -132,7 +202,7 @@ var themes = [
   },
   {
     name: "firouzeh",
-    label: "Firouzeh (\u0641\u06CC\u0631\u0648\u0632\u0647) \u2014 Persian Turquoise",
+    label: "Firouzeh \u2014 Persian Turquoise",
     cssVars: {
       light: {
         "--background": "180 20% 98%",
@@ -171,7 +241,7 @@ var themes = [
   },
   {
     name: "lajvard",
-    label: "Lajvard (\u0644\u0627\u062C\u0648\u0631\u062F) \u2014 Lapis Lazuli",
+    label: "Lajvard \u2014 Lapis Lazuli",
     cssVars: {
       light: {
         "--background": "225 25% 98%",
@@ -210,7 +280,7 @@ var themes = [
   },
   {
     name: "puste",
-    label: "Puste (\u067E\u0633\u062A\u0647) \u2014 Pistachio",
+    label: "Puste \u2014 Pistachio",
     cssVars: {
       light: {
         "--background": "80 20% 98%",
@@ -249,7 +319,7 @@ var themes = [
   },
   {
     name: "anar",
-    label: "Anar (\u0627\u0646\u0627\u0631) \u2014 Pomegranate",
+    label: "Anar \u2014 Pomegranate",
     cssVars: {
       light: {
         "--background": "0 20% 98%",
@@ -287,7 +357,29 @@ var themes = [
     }
   }
 ];
-function generateThemeCSS(theme) {
+var COLOR_VARS = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "destructive",
+  "destructive-foreground",
+  "card",
+  "card-foreground",
+  "border",
+  "muted",
+  "muted-foreground",
+  "ring"
+];
+function generateThemeCSS(theme, tailwindVersion = "v3") {
+  if (tailwindVersion === "v4") {
+    return generateV4CSS(theme);
+  }
+  return generateV3CSS(theme);
+}
+function generateV3CSS(theme) {
   const lightVars = Object.entries(theme.cssVars.light).map(([key, value]) => `    ${key}: ${value};`).join("\n");
   const darkVars = Object.entries(theme.cssVars.dark).map(([key, value]) => `    ${key}: ${value};`).join("\n");
   return `@tailwind base;
@@ -314,21 +406,49 @@ ${darkVars}
 }
 `;
 }
+function generateV4CSS(theme) {
+  const lightVars = Object.entries(theme.cssVars.light).map(([key, value]) => {
+    if (key === "--radius") return `  ${key}: ${value};`;
+    return `  ${key}: hsl(${value});`;
+  }).join("\n");
+  const darkVars = Object.entries(theme.cssVars.dark).map(([key, value]) => {
+    if (key === "--radius") return `  ${key}: ${value};`;
+    return `  ${key}: hsl(${value});`;
+  }).join("\n");
+  const themeColorMappings = COLOR_VARS.map((name) => `  --color-${name}: var(--${name});`).join("\n");
+  return `@import "tailwindcss";
+
+:root {
+${lightVars}
+}
+
+.dark {
+${darkVars}
+}
+
+@theme inline {
+${themeColorMappings}
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+`;
+}
 
 // src/utils/logger.ts
-import chalk2 from "chalk";
+import chalk from "chalk";
 var logger = {
-  info: (msg) => console.log(chalk2.cyan("\u2139"), msg),
-  success: (msg) => console.log(chalk2.green("\u2713"), msg),
-  warn: (msg) => console.log(chalk2.yellow("\u26A0"), msg),
-  error: (msg) => console.log(chalk2.red("\u2717"), msg),
+  info: (msg) => console.log(chalk.cyan("\u2139"), msg),
+  success: (msg) => console.log(chalk.green("\u2713"), msg),
+  warn: (msg) => console.log(chalk.yellow("\u26A0"), msg),
+  error: (msg) => console.log(chalk.red("\u2717"), msg),
   break: () => console.log("")
 };
 
 // src/commands/init.ts
 async function initCommand(opts) {
   const cwd = process.cwd();
-  p.intro(chalk3.bold("Welcome to Rad UI"));
+  p.intro(chalk2.bold("Welcome to Rad UI"));
   if (await configExists(cwd)) {
     const shouldContinue = await p.confirm({
       message: "Rad UI is already initialized in this project. Reinitialize?",
@@ -341,53 +461,52 @@ async function initCommand(opts) {
   }
   const projectType = await detectProjectType(cwd);
   const packageManager = await detectPackageManager(cwd);
+  const detectedSrcDir = await detectSrcDir(cwd);
+  const defaultCssPath = getDefaultCssPath(projectType);
+  const tailwindVersion = await detectTailwindVersion(cwd, defaultCssPath);
   if (projectType !== "unknown") {
-    p.log.info(`Detected project: ${chalk3.cyan(projectType)}`);
+    p.log.info(`Detected project: ${chalk2.cyan(projectType)}`);
   }
-  p.log.info(`Package manager: ${chalk3.cyan(packageManager)}`);
+  p.log.info(`Package manager: ${chalk2.cyan(packageManager)}`);
+  p.log.info(`Tailwind CSS: ${chalk2.cyan(tailwindVersion)}`);
+  p.log.info(`Source directory: ${chalk2.cyan(detectedSrcDir + "/")}`);
   const responses = await p.group(
     {
-      platform: () => p.select({
-        message: "Which platform are you building for?",
-        options: [
-          { value: "web", label: "Web", hint: "React + Tailwind CSS" },
-          {
-            value: "mobile",
-            label: "Mobile",
-            hint: "React Native + NativeWind (coming soon)"
-          },
-          { value: "both", label: "Both", hint: "Web + Mobile" }
-        ],
-        initialValue: "web"
-      }),
       theme: () => p.select({
-        message: "Choose a theme:",
+        message: "Choose a color theme for your project:",
         options: themes.map((t) => ({
           value: t.name,
           label: t.label
         })),
         initialValue: "kahgel"
       }),
+      srcDir: () => p.text({
+        message: `Base directory that @ resolves to:`,
+        placeholder: detectedSrcDir,
+        defaultValue: detectedSrcDir
+      }),
       componentsPath: () => p.text({
-        message: "Where would you like to store components?",
+        message: `Where to add UI components (e.g. ${detectedSrcDir}/components/ui):`,
         placeholder: "@/components/ui",
         defaultValue: "@/components/ui"
       }),
       utilsPath: () => p.text({
-        message: "Where is your utils file?",
+        message: `Where to create the cn() helper (e.g. ${detectedSrcDir}/lib/utils.ts):`,
         placeholder: "@/lib/utils",
         defaultValue: "@/lib/utils"
       }),
       cssPath: () => p.text({
-        message: "Where is your global CSS file?",
-        placeholder: getDefaultCssPath(projectType),
-        defaultValue: getDefaultCssPath(projectType)
+        message: `Path to your global CSS file:`,
+        placeholder: defaultCssPath,
+        defaultValue: defaultCssPath
       }),
-      tailwindConfig: () => p.text({
-        message: "Where is your Tailwind config file?",
-        placeholder: getDefaultTailwindConfig(projectType),
-        defaultValue: getDefaultTailwindConfig(projectType)
-      })
+      ...tailwindVersion === "v3" ? {
+        tailwindConfig: () => p.text({
+          message: `Path to your Tailwind config file:`,
+          placeholder: getDefaultTailwindConfig(projectType),
+          defaultValue: getDefaultTailwindConfig(projectType)
+        })
+      } : {}
     },
     {
       onCancel: () => {
@@ -396,15 +515,18 @@ async function initCommand(opts) {
       }
     }
   );
+  const srcDir = responses.srcDir || detectedSrcDir;
   const s = p.spinner();
   s.start("Creating configuration...");
   const config = {
     $schema: "https://www.quarklab.dev/schema.json",
     registry: "https://www.quarklab.dev/r",
-    platform: responses.platform,
+    tailwindVersion,
+    srcDir,
+    platform: "web",
     theme: responses.theme,
     tailwind: {
-      config: responses.tailwindConfig,
+      ...tailwindVersion === "v3" && responses.tailwindConfig ? { config: responses.tailwindConfig } : {},
       css: responses.cssPath
     },
     aliases: {
@@ -420,13 +542,13 @@ async function initCommand(opts) {
     const cssPath = path3.resolve(cwd, config.tailwind.css);
     const cssDir = path3.dirname(cssPath);
     await fs3.ensureDir(cssDir);
-    const cssContent = generateThemeCSS(selectedTheme);
+    const cssContent = generateThemeCSS(selectedTheme, tailwindVersion);
     await fs3.writeFile(cssPath, cssContent, "utf-8");
   }
   s.stop("Theme configured.");
   s.start("Setting up utilities...");
   const utilsAlias = config.aliases.utils;
-  const utilsRelPath = utilsAlias.replace(/^@\//, "src/") + ".ts";
+  const utilsRelPath = utilsAlias.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/") + ".ts";
   const utilsDestPath = path3.resolve(cwd, utilsRelPath);
   const utilsDir = path3.dirname(utilsDestPath);
   await fs3.ensureDir(utilsDir);
@@ -439,29 +561,30 @@ export function cn(...inputs: ClassValue[]) {
 `;
   await fs3.writeFile(utilsDestPath, utilsContent, "utf-8");
   s.stop("Utilities ready.");
-  s.start("Configuring Tailwind CSS...");
-  const tailwindConfigPath = path3.resolve(cwd, config.tailwind.config);
-  const componentsRelPath = config.aliases.components.replace(/^@\//, "src/");
-  if (await fs3.pathExists(tailwindConfigPath)) {
-    let tailwindContent = await fs3.readFile(tailwindConfigPath, "utf-8");
-    const contentPath = `./${componentsRelPath}/**/*.{ts,tsx}`;
-    if (!tailwindContent.includes(contentPath)) {
-      tailwindContent = tailwindContent.replace(
-        /(content\s*:\s*\[)/,
-        `$1
+  if (tailwindVersion === "v3" && config.tailwind.config) {
+    s.start("Configuring Tailwind CSS...");
+    const tailwindConfigPath = path3.resolve(cwd, config.tailwind.config);
+    const componentsRelPath = config.aliases.components.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/");
+    if (await fs3.pathExists(tailwindConfigPath)) {
+      let tailwindContent = await fs3.readFile(tailwindConfigPath, "utf-8");
+      const contentPath = `./${componentsRelPath}/**/*.{ts,tsx}`;
+      if (!tailwindContent.includes(contentPath)) {
+        tailwindContent = tailwindContent.replace(
+          /(content\s*:\s*\[)/,
+          `$1
     "${contentPath}",`
-      );
-      await fs3.writeFile(tailwindConfigPath, tailwindContent, "utf-8");
-      p.log.info(`Added component path to ${config.tailwind.config}`);
-    }
-  } else {
-    const isTS = config.tailwind.config.endsWith(".ts");
-    const newConfig = isTS ? `import type { Config } from "tailwindcss";
+        );
+        await fs3.writeFile(tailwindConfigPath, tailwindContent, "utf-8");
+        p.log.info(`Added component path to ${config.tailwind.config}`);
+      }
+    } else {
+      const isTS = config.tailwind.config.endsWith(".ts");
+      const newConfig = isTS ? `import type { Config } from "tailwindcss";
 
 const config: Config = {
   darkMode: ["class"],
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./${srcDir}/**/*.{js,ts,jsx,tsx,mdx}",
     "./${componentsRelPath}/**/*.{ts,tsx}",
   ],
   theme: {
@@ -516,7 +639,7 @@ export default config;
 module.exports = {
   darkMode: ["class"],
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./${srcDir}/**/*.{js,ts,jsx,tsx,mdx}",
     "./${componentsRelPath}/**/*.{ts,tsx}",
   ],
   theme: {
@@ -566,16 +689,17 @@ module.exports = {
   plugins: [],
 };
 `;
-    await fs3.writeFile(tailwindConfigPath, newConfig, "utf-8");
+      await fs3.writeFile(tailwindConfigPath, newConfig, "utf-8");
+    }
+    s.stop("Tailwind CSS configured.");
+  } else {
+    p.log.info(
+      `Tailwind v4 detected \u2014 theme variables added directly to ${chalk2.cyan(config.tailwind.css)}`
+    );
   }
-  s.stop("Tailwind CSS configured.");
   s.start("Installing base dependencies...");
-  const installCmd = getInstallCommand(packageManager, [
-    "tailwindcss",
-    "clsx",
-    "tailwind-merge",
-    "class-variance-authority"
-  ]);
+  const baseDeps = ["clsx", "tailwind-merge", "class-variance-authority"];
+  const installCmd = getInstallCommand(packageManager, baseDeps);
   try {
     const { execa } = await import("execa");
     await execa(installCmd.command, installCmd.args, {
@@ -586,20 +710,21 @@ module.exports = {
   } catch {
     s.stop("Could not auto-install dependencies.");
     p.log.warn(
-      `Please manually install: ${chalk3.cyan("tailwindcss clsx tailwind-merge class-variance-authority")}`
+      `Please manually install: ${chalk2.cyan(baseDeps.join(" "))}`
     );
   }
   logger.break();
   p.note(
     [
-      `${chalk3.green("Rad UI has been initialized!")}`,
+      `${chalk2.green("Rad UI has been initialized!")}`,
       "",
-      `Add components with: ${chalk3.cyan("npx @quarklab/rad-ui add <component>")}`,
-      `Add all components:  ${chalk3.cyan("npx @quarklab/rad-ui add --all")}`,
+      `Add components with: ${chalk2.cyan("npx @quarklab/rad-ui add <component>")}`,
+      `Add all components:  ${chalk2.cyan("npx @quarklab/rad-ui add --all")}`,
       "",
-      `Theme: ${chalk3.cyan(selectedTheme?.label || config.theme)}`,
-      `Components: ${chalk3.cyan(config.aliases.components)}`,
-      `Utils: ${chalk3.cyan(config.aliases.utils)}`
+      `Theme: ${chalk2.cyan(selectedTheme?.label || config.theme)}`,
+      `Tailwind: ${chalk2.cyan(tailwindVersion)}`,
+      `Components: ${chalk2.cyan(config.aliases.components)} \u2192 ${chalk2.dim(srcDir + "/" + config.aliases.components.replace(/^@\//, "").replace(/^~\//, ""))}`,
+      `Utils: ${chalk2.cyan(config.aliases.utils)} \u2192 ${chalk2.dim(srcDir + "/" + config.aliases.utils.replace(/^@\//, "").replace(/^~\//, "") + ".ts")}`
     ].join("\n"),
     "Next steps"
   );
@@ -623,7 +748,7 @@ import path4 from "path";
 import { fileURLToPath } from "url";
 import fs4 from "fs-extra";
 import * as p2 from "@clack/prompts";
-import chalk4 from "chalk";
+import chalk3 from "chalk";
 
 // src/registry/index.ts
 var components = [
@@ -956,10 +1081,10 @@ async function getComponentContent(name, config) {
 }
 async function addCommand(componentNames, opts) {
   const cwd = process.cwd();
-  p2.intro(chalk4.bold("Add Rad UI Components"));
+  p2.intro(chalk3.bold("Add Rad UI Components"));
   if (!await configExists(cwd)) {
     p2.log.error(
-      `Configuration not found. Run ${chalk4.cyan("npx @quarklab/rad-ui init")} first.`
+      `Configuration not found. Run ${chalk3.cyan("npx @quarklab/rad-ui init")} first.`
     );
     process.exit(1);
   }
@@ -987,10 +1112,10 @@ async function addCommand(componentNames, opts) {
     const invalid = componentNames.filter((n) => !availableNames.includes(n));
     if (invalid.length > 0) {
       p2.log.error(
-        `Unknown component(s): ${invalid.map((n) => chalk4.red(n)).join(", ")}`
+        `Unknown component(s): ${invalid.map((n) => chalk3.red(n)).join(", ")}`
       );
       p2.log.info(
-        `Available: ${availableNames.map((n) => chalk4.cyan(n)).join(", ")}`
+        `Available: ${availableNames.map((n) => chalk3.cyan(n)).join(", ")}`
       );
       process.exit(1);
     }
@@ -1015,7 +1140,7 @@ async function addCommand(componentNames, opts) {
   const extraDeps = allNames.filter((n) => !selectedNames.includes(n));
   if (extraDeps.length > 0) {
     p2.log.info(
-      `Also adding dependencies: ${extraDeps.map((n) => chalk4.cyan(n)).join(", ")}`
+      `Also adding dependencies: ${extraDeps.map((n) => chalk3.cyan(n)).join(", ")}`
     );
   }
   const componentsDir = opts.path ? path4.resolve(cwd, opts.path) : resolveComponentsDir(cwd, config);
@@ -1034,7 +1159,7 @@ async function addCommand(componentNames, opts) {
     }
     if (existing.length > 0) {
       const shouldOverwrite = await p2.confirm({
-        message: `The following components already exist: ${existing.map((n) => chalk4.yellow(n)).join(", ")}. Overwrite?`,
+        message: `The following components already exist: ${existing.map((n) => chalk3.yellow(n)).join(", ")}. Overwrite?`,
         initialValue: false
       });
       if (p2.isCancel(shouldOverwrite) || !shouldOverwrite) {
@@ -1098,19 +1223,19 @@ async function addCommand(componentNames, opts) {
       s.stop("Could not auto-install dependencies.");
       p2.log.warn(
         `Please manually install:
-${chalk4.cyan(depsToInstall.join(" "))}`
+${chalk3.cyan(depsToInstall.join(" "))}`
       );
     }
   }
   logger.break();
   p2.note(
     [
-      `Components added to ${chalk4.cyan(componentsDir.replace(cwd + "/", ""))}:`,
+      `Components added to ${chalk3.cyan(componentsDir.replace(cwd + "/", ""))}:`,
       "",
-      ...allNames.map((n) => `  ${chalk4.green("+")} ${n}`),
+      ...allNames.map((n) => `  ${chalk3.green("+")} ${n}`),
       "",
       "Import example:",
-      chalk4.gray(
+      chalk3.gray(
         `  import { Button } from "${config.aliases.components}/button";`
       )
     ].join("\n"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quarklab/rad-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A CLI for adding Rad UI components to your project. Beautiful Persian-themed React components built on Radix UI and Tailwind CSS.",
   "license": "MIT",
   "type": "module",