@srcroot/ui 0.0.32 → 0.0.34

package/dist/index.js

@@ -2,15 +2,15 @@
 
 // src/cli/index.ts
 import { Command } from "commander";
-import chalk4 from "chalk";
+import chalk3 from "chalk";
 
 // src/cli/services/project-initializer.ts
 import fs2 from "fs-extra";
 import path2 from "path";
-import chalk from "chalk";
 import ora from "ora";
 import prompts from "prompts";
 import { fileURLToPath as fileURLToPath2 } from "url";
+import { execa } from "execa";
 
 // src/cli/services/theme-service.ts
 import fs from "fs-extra";
@@ -143,6 +143,41 @@ const config: Config = {
 export default config
 `;
 
+// src/cli/utils/get-package-manager.ts
+function getPackageManager() {
+  const userAgent = process.env.npm_config_user_agent;
+  if (!userAgent) {
+    return "npm";
+  }
+  if (userAgent.startsWith("yarn")) {
+    return "yarn";
+  }
+  if (userAgent.startsWith("pnpm")) {
+    return "pnpm";
+  }
+  if (userAgent.startsWith("bun")) {
+    return "bun";
+  }
+  return "npm";
+}
+
+// src/cli/utils/logger.ts
+import chalk from "chalk";
+var logger = {
+  error(...args) {
+    console.log(chalk.red(...args));
+  },
+  warn(...args) {
+    console.log(chalk.yellow(...args));
+  },
+  info(...args) {
+    console.log(chalk.cyan(...args));
+  },
+  success(...args) {
+    console.log(chalk.green(...args));
+  }
+};
+
 // src/cli/services/project-initializer.ts
 var __dirname3 = path2.dirname(fileURLToPath2(import.meta.url));
 var ProjectInitializer = class {
@@ -154,35 +189,32 @@ var ProjectInitializer = class {
     this.themeService = new ThemeService();
   }
   async run() {
-    console.log(chalk.cyan("\n\u{1F680} Initializing @srcroot/ui...\n"));
+    logger.info("\n\u{1F680} Initializing @srcroot/ui...\n");
     await this.validateEnvironment();
     await this.detectConfiguration();
     await this.promptUser();
     await this.scaffold();
+    await this.installDependencies();
     this.printSuccess();
   }
   async validateEnvironment() {
     const cwd = path2.resolve(this.options.cwd);
     const packageJsonPath = path2.join(cwd, "package.json");
     if (!fs2.existsSync(packageJsonPath)) {
-      console.log(chalk.red("Error: No package.json found. Please run this in a project directory."));
+      logger.error("Error: No package.json found. Please run this in a project directory.");
       process.exit(1);
     }
     const pkg = await fs2.readJson(packageJsonPath);
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     if (!allDeps["react"]) {
-      console.log(chalk.red("Error: React not found in dependencies. Please initialize this in a React project."));
+      logger.error("Error: React not found in dependencies. Please initialize this in a React project.");
       process.exit(1);
     }
   }
   async detectConfiguration() {
     const cwd = path2.resolve(this.options.cwd);
-    const userAgent = process.env.npm_config_user_agent || "";
-    const isYarn = userAgent.includes("yarn");
-    const isPnpm = userAgent.includes("pnpm");
-    const isBun = userAgent.includes("bun");
-    const packageManager = isPnpm ? "pnpm" : isYarn ? "yarn" : isBun ? "bun" : "npm";
-    const installCmd = isPnpm ? "add" : isYarn ? "add" : isBun ? "add" : "install";
+    const packageManager = getPackageManager();
+    const installCmd = packageManager === "npm" ? "install" : "add";
     const pkg = await fs2.readJson(path2.join(cwd, "package.json"));
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     const tailwindVersion = allDeps["tailwindcss"] || "";
@@ -229,12 +261,12 @@ var ProjectInitializer = class {
     if (!this.options.yes && !this.options.theme) {
       const availableThemes = this.themeService.getAvailableThemes();
       if (availableThemes.length === 0) {
-        console.log(chalk.yellow("Warning: No themes found in registry. Using default."));
+        logger.warn("Warning: No themes found in registry. Using default.");
         this.config.selectedTheme = selectedTheme;
         return;
       }
       const themeChoices = availableThemes.map((theme) => ({
-        title: `${theme.name} - ${chalk.dim(theme.description)}`,
+        title: `${theme.name} - ${theme.description}`,
         value: theme.file.replace(".css", "")
       }));
       const themeResponse = await prompts({
@@ -272,14 +304,14 @@ export function cn(...inputs: ClassValue[]) {
         spinner.warn(`Could not find registry/utils.ts, using fallback content.`);
       }
       await fs2.writeFile(utilsPath, utilsContent);
-      spinner.succeed(`Created ${chalk.cyan(path2.relative(cfg.cwd, utilsPath))}`);
-      spinner.start(`Setting up ${chalk.cyan(cfg.selectedTheme)} theme...`);
+      spinner.succeed(`Created ${path2.relative(cfg.cwd, utilsPath)}`);
+      spinner.start(`Setting up ${cfg.selectedTheme} theme...`);
       const stylesDir = path2.dirname(cfg.globalsPath);
       await fs2.ensureDir(stylesDir);
       try {
         const cssContent = await this.themeService.getThemeCss(cfg.selectedTheme, cfg.isTailwind4);
         await fs2.writeFile(cfg.globalsPath, cssContent);
-        spinner.succeed(`Updated ${chalk.cyan(path2.relative(cfg.cwd, cfg.globalsPath))} with ${chalk.cyan(cfg.selectedTheme)} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
+        spinner.succeed(`Updated ${path2.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
       } catch (error) {
         spinner.fail(`Failed to load theme: ${cfg.selectedTheme}`);
         console.error(error);
@@ -289,9 +321,9 @@ export function cn(...inputs: ClassValue[]) {
         spinner.start("Setting up Tailwind config...");
         const tailwindConfigPath = path2.join(cfg.cwd, "tailwind.config.ts");
         await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
-        spinner.succeed(`Created ${chalk.cyan("tailwind.config.ts")}`);
+        spinner.succeed(`Created tailwind.config.ts`);
       } else {
-        spinner.info(`Tailwind 4 detected - skipping ${chalk.cyan("tailwind.config.ts")}`);
+        spinner.info(`Tailwind 4 detected - skipping tailwind.config.ts`);
       }
     } catch (error) {
       spinner.fail("Failed to initialize project");
@@ -299,26 +331,38 @@ export function cn(...inputs: ClassValue[]) {
       process.exit(1);
     }
   }
-  printSuccess() {
+  async installDependencies() {
     const cfg = this.config;
-    console.log(chalk.green("\n\u2705 Project initialized successfully!\n"));
-    console.log(`Theme: ${chalk.cyan(cfg.selectedTheme)}`);
-    console.log(`Tailwind: ${chalk.cyan(cfg.isTailwind4 ? "v4" : "v3")}`);
-    const requiredDeps = [
+    const spinner = ora("Installing dependencies...").start();
+    const deps = [
       "clsx",
       "tailwind-merge",
       "class-variance-authority",
       "react-icons"
     ];
     if (!cfg.isTailwind4) {
-      requiredDeps.push("tailwindcss-animate");
+      deps.push("tailwindcss-animate");
+    }
+    try {
+      await execa(cfg.packageManager, [cfg.installCmd, ...deps], {
+        cwd: cfg.cwd,
+        stdio: "pipe"
+      });
+      spinner.succeed(`Installed ${deps.length} dependencies`);
+    } catch (error) {
+      spinner.fail("Failed to install dependencies");
+      logger.warn(`
+Manually run: ${cfg.packageManager} ${cfg.installCmd} ${deps.join(" ")}`);
     }
-    console.log(chalk.cyan("\n\u{1F4E6} Required dependencies:"));
-    console.log(chalk.dim(`  ${cfg.packageManager} ${cfg.installCmd} ${requiredDeps.join(" ")}`));
+  }
+  printSuccess() {
+    const cfg = this.config;
+    logger.success("\n\u2705 Project initialized successfully!\n");
+    console.log(`Theme: ${cfg.selectedTheme}`);
+    console.log(`Tailwind: ${cfg.isTailwind4 ? "v4" : "v3"}`);
     console.log("\n\u2728 Next steps:");
-    console.log(chalk.dim("  1. Install dependencies (command above)"));
-    console.log(chalk.dim("  2. npx @srcroot/ui add button"));
-    console.log(chalk.dim("  3. npx @srcroot/ui add --all"));
+    console.log("  1. npx @srcroot/ui add button");
+    console.log("  2. npx @srcroot/ui add --all");
     console.log();
   }
 };
@@ -332,7 +376,6 @@ async function init(options) {
 // src/cli/commands/add.ts
 import fs3 from "fs-extra";
 import path3 from "path";
-import chalk2 from "chalk";
 import ora2 from "ora";
 import prompts2 from "prompts";
 import { fileURLToPath as fileURLToPath3 } from "url";
@@ -736,7 +779,7 @@ async function add(components, options) {
       }))
     });
     if (!items || items.length === 0) {
-      console.log(chalk2.yellow("No components selected."));
+      logger.warn("No components selected.");
       process.exit(0);
     }
     components = items;
@@ -751,8 +794,8 @@ async function add(components, options) {
     }
   }
   if (invalidComponents.length > 0) {
-    console.log(chalk2.red(`Unknown components: ${invalidComponents.join(", ")}`));
-    console.log(chalk2.dim("\nRun '@srcroot/ui list' to see available components."));
+    logger.error(`Unknown components: ${invalidComponents.join(", ")}`);
+    console.log("\nRun '@srcroot/ui list' to see available components.");
     process.exit(1);
   }
   const toInstall = /* @__PURE__ */ new Set();
@@ -771,13 +814,13 @@ async function add(components, options) {
   }
   const componentsToAdd = Array.from(toInstall);
   if (componentsToAdd.length > 10) {
-    console.log(chalk2.cyan(`
+    logger.info(`
 \u{1F4E6} Adding ${componentsToAdd.length} components...
-`));
+`);
   } else {
-    console.log(chalk2.cyan("\n\u{1F4E6} Adding components:\n"));
+    logger.info("\n\u{1F4E6} Adding components:\n");
     componentsToAdd.forEach((name) => {
-      console.log(chalk2.dim(`  - ${name}`));
+      console.log(`  - ${name}`);
     });
   }
   console.log();
@@ -796,11 +839,11 @@ async function add(components, options) {
         const { overwrite } = await prompts2({
           type: "confirm",
           name: "overwrite",
-          message: `${chalk2.cyan(fileName)} already exists. Overwrite?`,
+          message: `${fileName} already exists. Overwrite?`,
           initial: false
         });
         if (!overwrite) {
-          spinner.info(`Skipped ${chalk2.cyan(fileName)}`);
+          spinner.info(`Skipped ${fileName}`);
           spinner.start("Adding components...");
           continue;
         }
@@ -814,15 +857,15 @@ async function add(components, options) {
       const content = await fs3.readFile(registryPath, "utf-8");
       await fs3.writeFile(targetPath, content);
       if (componentsToAdd.length > 10) {
-        spinner.text = `Adding ${chalk2.cyan(fileName)}...`;
+        spinner.text = `Adding ${fileName}...`;
       } else {
-        spinner.succeed(`Added ${chalk2.cyan(fileName)}`);
+        spinner.succeed(`Added ${fileName}`);
       }
     }
     if (componentsToAdd.length > 10) {
       spinner.succeed(`Added ${componentsToAdd.length} components`);
     }
-    console.log(chalk2.green("\n\u2705 Components added successfully!\n"));
+    logger.success("\n\u2705 Components added successfully!\n");
   } catch (error) {
     spinner.fail("Failed to add components");
     console.error(error);
@@ -831,9 +874,9 @@ async function add(components, options) {
 }
 
 // src/cli/commands/list.ts
-import chalk3 from "chalk";
+import chalk2 from "chalk";
 async function list() {
-  console.log(chalk3.cyan("\n\u{1F4E6} Available components:\n"));
+  console.log(chalk2.cyan("\n\u{1F4E6} Available components:\n"));
   const categories = {
     "Core": [],
     "Typography": [],
@@ -851,14 +894,14 @@ async function list() {
   }
   for (const [category, components] of Object.entries(categories)) {
     if (components.length === 0) continue;
-    console.log(chalk3.bold.white(`  ${category}`));
+    console.log(chalk2.bold.white(`  ${category}`));
     components.forEach((name) => {
       const comp = REGISTRY[name];
-      console.log(chalk3.dim(`    - ${name}`) + chalk3.gray(` (${comp.description})`));
+      console.log(chalk2.dim(`    - ${name}`) + chalk2.gray(` (${comp.description})`));
     });
     console.log();
   }
-  console.log(chalk3.dim("Usage: npx @srcroot/ui add <component>\n"));
+  console.log(chalk2.dim("Usage: npx @srcroot/ui add <component>\n"));
 }
 
 // src/cli/utils/get-package-info.ts
@@ -894,7 +937,7 @@ async function main() {
   program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompts", false).option("-o, --overwrite", "Overwrite existing files", false).option("-a, --all", "Add all available components", false).option("--cwd <path>", "Working directory", process.cwd()).action(add);
   program.command("list").description("List all available components").action(list);
   if (process.argv.length < 3) {
-    console.log(chalk4.cyan(`
+    console.log(chalk3.cyan(`
   @srcroot/ui v${packageInfo.version}
   
   A UI library with polymorphic, accessible components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {
@@ -25,6 +25,7 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
+    "execa": "^9.6.1",
     "fs-extra": "^11.2.0",
     "ora": "^8.1.1",
     "prompts": "^2.4.2"
@@ -33,28 +34,29 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
     "@types/prompts": "^2.4.9",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2",
-    "tailwindcss-animate": "^1.0.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^3.0.0 || ^4.0.0",
-    "react-icons": "^5.5.0"
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.3.5",
+    "type-fest": "^5.3.1",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "react-icons": "^5.5.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "tailwindcss": "^3.0.0 || ^4.0.0"
+    "tailwindcss": "^3.0.0 || ^4.0.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "peerDependenciesMeta": {
     "cmdk": {