@dinachi/cli 0.6.0 → 0.6.2

package/dist/index.js

@@ -11,6 +11,7 @@ import path3 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import ora from "ora";
 import chalk from "chalk";
+import prompts from "prompts";
 
 // src/utils/registry.ts
 import fs from "fs-extra";
@@ -374,25 +375,14 @@ var LOCK_FILE_MAP = [
   { file: "yarn.lock", manager: "yarn" },
   { file: "package-lock.json", manager: "npm" }
 ];
-function walkUpDirectories(startDir) {
-  const dirs = [];
-  let current = path2.resolve(startDir);
-  while (true) {
-    dirs.push(current);
-    const parent = path2.dirname(current);
-    if (parent === current) {
-      break;
+function detectPackageManager(startDir = process.cwd()) {
+  for (const entry of LOCK_FILE_MAP) {
+    if (fs2.existsSync(path2.join(startDir, entry.file))) {
+      return entry.manager;
     }
-    current = parent;
   }
-  return dirs;
-}
-function detectManagerFromPackageJson(startDir) {
-  for (const dir of walkUpDirectories(startDir)) {
-    const packageJsonPath = path2.join(dir, "package.json");
-    if (!fs2.existsSync(packageJsonPath)) {
-      continue;
-    }
+  const packageJsonPath = path2.join(startDir, "package.json");
+  if (fs2.existsSync(packageJsonPath)) {
     try {
       const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
       const value = packageJson.packageManager ?? "";
@@ -401,21 +391,6 @@ function detectManagerFromPackageJson(startDir) {
       if (value.startsWith("bun@")) return "bun";
       if (value.startsWith("npm@")) return "npm";
     } catch {
-      continue;
-    }
-  }
-  return null;
-}
-function detectPackageManager(startDir = process.cwd()) {
-  const packageJsonManager = detectManagerFromPackageJson(startDir);
-  if (packageJsonManager) {
-    return packageJsonManager;
-  }
-  for (const dir of walkUpDirectories(startDir)) {
-    for (const entry of LOCK_FILE_MAP) {
-      if (fs2.existsSync(path2.join(dir, entry.file))) {
-        return entry.manager;
-      }
     }
   }
   return "npm";
@@ -668,6 +643,46 @@ ${withTrailingComma}
 `;
   return next;
 }
+function detectTailwindMajorVersion(projectRoot) {
+  const packageJsonPath = path3.join(projectRoot, "package.json");
+  if (!fs3.existsSync(packageJsonPath)) return 4;
+  try {
+    const raw = fs3.readFileSync(packageJsonPath, "utf-8");
+    const packageJson = JSON.parse(raw);
+    const deps = { ...packageJson.dependencies ?? {}, ...packageJson.devDependencies ?? {} };
+    const twVersion = deps.tailwindcss;
+    if (!twVersion) return 4;
+    const match = twVersion.match(/(\d+)/);
+    return match ? parseInt(match[1], 10) : 4;
+  } catch {
+    return 4;
+  }
+}
+async function ensureTW4Plugin(deps, cssFilePath) {
+  if (!deps.includes("tailwindcss-animate")) {
+    return null;
+  }
+  if (!fs3.existsSync(cssFilePath)) {
+    return { skipped: true, path: cssFilePath };
+  }
+  const content = await fs3.readFile(cssFilePath, "utf-8");
+  if (content.includes("tailwindcss-animate")) {
+    return { exists: true, path: cssFilePath };
+  }
+  const pluginLine = '@plugin "tailwindcss-animate";';
+  const importMatch = content.match(/^@import\s+["']tailwindcss["'];?\s*$/m);
+  let updated;
+  if (importMatch) {
+    updated = content.replace(importMatch[0], `${importMatch[0].trimEnd()}
+${pluginLine}
+`);
+  } else {
+    updated = `${pluginLine}
+${content}`;
+  }
+  await fs3.writeFile(cssFilePath, updated);
+  return { updated: true, path: cssFilePath };
+}
 async function ensureTailwindConfig(deps, projectRoot, configuredFileName) {
   if (!deps.includes("tailwindcss-animate")) {
     return null;
@@ -730,6 +745,19 @@ ${updatedContent}`;
 function escapeRegex(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+function extractExportBlocks(content) {
+  const results = [];
+  const regex = /export\s+(?:type\s+)?{[^}]*}\s*from\s+['"]\.\/([^'"]+)['"]\s*;?/g;
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    results.push({ block: match[0].trimEnd(), modulePath: match[1] });
+  }
+  const starRegex = /export\s+\*\s+from\s+['"]\.\/([^'"]+)['"]\s*;?/g;
+  while ((match = starRegex.exec(content)) !== null) {
+    results.push({ block: match[0].trimEnd(), modulePath: match[1] });
+  }
+  return results;
+}
 async function handleIndexFile(sourcePath, targetPath, allFilesAdded, targetDir) {
   const templateContent = stripTemplateDirective(await fs3.readFile(sourcePath, "utf-8"));
   if (!fs3.existsSync(targetPath)) {
@@ -738,31 +766,30 @@ async function handleIndexFile(sourcePath, targetPath, allFilesAdded, targetDir)
     return;
   }
   const existingContent = await fs3.readFile(targetPath, "utf-8");
-  const exportLines = templateContent.split("\n").map((line) => line.trim()).filter((line) => /^export\s+/.test(line) && /from\s+['"]\.\/[^'"]+['"]/.test(line));
-  const linesToAppend = [];
-  for (const line of exportLines) {
-    const match = line.match(/from\s+['"]\.\/([^'"]+)['"]/);
-    if (!match) {
-      continue;
-    }
-    const modulePath = match[1];
+  const exportBlocks = extractExportBlocks(templateContent);
+  const blocksToAppend = [];
+  for (const { block, modulePath } of exportBlocks) {
     const modulePathPattern = new RegExp(`from\\s+['"]\\./${escapeRegex(modulePath)}['"]`);
     if (modulePathPattern.test(existingContent)) {
       continue;
     }
-    linesToAppend.push(line.endsWith(";") ? line : `${line};`);
+    const normalized = block.endsWith(";") ? block : `${block};`;
+    blocksToAppend.push(normalized);
   }
-  if (linesToAppend.length === 0) {
+  if (blocksToAppend.length === 0) {
     return;
   }
   const updatedContent = `${existingContent.trimEnd()}
-${linesToAppend.join("\n")}
+${blocksToAppend.join("\n")}
 `;
   await fs3.writeFile(targetPath, updatedContent);
-  allFilesAdded.push({ name: "index.ts", path: path3.join(targetDir, "index.ts") });
+  const indexPath = path3.join(targetDir, "index.ts");
+  if (!allFilesAdded.some((f) => f.path === indexPath)) {
+    allFilesAdded.push({ name: "index.ts", path: indexPath });
+  }
 }
-var addCommand = new Command("add").description("Add a component to your project").argument("[component]", "Name of the component (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").option("--skip-install", "Skip package installation").action(
-  async (componentName, options) => {
+var addCommand = new Command("add").description("Add a component to your project").argument("[components...]", "Names of the components to add (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").option("--skip-install", "Skip package installation").action(
+  async (componentNames, options) => {
     const spinner = ora("Adding component...").start();
     try {
       const config = await getConfig();
@@ -785,7 +812,7 @@ var addCommand = new Command("add").description("Add a component to your project
         }
         componentsToInstall = Array.from(allComponentsWithDeps);
       } else {
-        if (!componentName) {
+        if (componentNames.length === 0) {
           spinner.fail("\u274C Component name is required when not using --all flag.");
           console.log("Available components:");
           Object.keys(registry).forEach((name) => {
@@ -793,16 +820,23 @@ var addCommand = new Command("add").description("Add a component to your project
           });
           process.exit(1);
         }
-        const component = registry[componentName];
-        if (!component) {
-          spinner.fail(`\u274C Component "${componentName}" not found.`);
-          console.log("Available components:");
-          Object.keys(registry).forEach((name) => {
-            console.log(`  ${chalk.cyan(name)}`);
-          });
-          process.exit(1);
+        for (const name of componentNames) {
+          if (!registry[name]) {
+            spinner.fail(`\u274C Component "${name}" not found.`);
+            console.log("Available components:");
+            Object.keys(registry).forEach((n) => {
+              console.log(`  ${chalk.cyan(n)}`);
+            });
+            process.exit(1);
+          }
+        }
+        const allWithDeps = /* @__PURE__ */ new Set();
+        for (const name of componentNames) {
+          allWithDeps.add(name);
+          const deps = getComponentDependencies(name);
+          deps.forEach((dep) => allWithDeps.add(dep));
         }
-        componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
+        componentsToInstall = Array.from(allWithDeps);
       }
       if (!options.all) {
         spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
@@ -855,8 +889,19 @@ var addCommand = new Command("add").description("Add a component to your project
             continue;
           }
           if (fs3.existsSync(targetPath) && !options.overwrite) {
-            spinner.warn(`\u26A0\uFE0F  ${file.name} already exists. Use --overwrite to replace it.`);
-            continue;
+            spinner.stop();
+            const { overwrite } = await prompts({
+              type: "confirm",
+              name: "overwrite",
+              message: `${file.name} already exists. Overwrite?`,
+              initial: false
+            });
+            if (!overwrite) {
+              console.log(`  ${chalk.yellow("\u2298")} Skipped ${file.name}`);
+              spinner.start();
+              continue;
+            }
+            spinner.start();
           }
           const templateContent = stripTemplateDirective(await fs3.readFile(sourcePath, "utf-8"));
           const rewrittenContent = rewriteTemplateImports(templateContent, targetPath, utilsFilePath, libDir);
@@ -868,7 +913,11 @@ var addCommand = new Command("add").description("Add a component to your project
         }
       }
       spinner.text = "Updating Tailwind configuration...";
-      const tailwindConfigInfo = await ensureTailwindConfig(
+      const tailwindMajor = detectTailwindMajorVersion(projectRoot);
+      const tailwindConfigInfo = tailwindMajor >= 4 ? await ensureTW4Plugin(
+        allDepsInstalled,
+        path3.resolve(projectRoot, config.tailwind?.css || "src/index.css")
+      ) : await ensureTailwindConfig(
         allDepsInstalled,
         projectRoot,
         config.tailwind?.config || "tailwind.config.js"
@@ -946,7 +995,7 @@ import { Command as Command2 } from "commander";
 import { execSync as execSync2 } from "child_process";
 import fs4 from "fs-extra";
 import path4 from "path";
-import prompts from "prompts";
+import prompts2 from "prompts";
 import chalk2 from "chalk";
 import ora2 from "ora";
 function normalizeProjectPath(inputPath, projectRoot) {
@@ -967,7 +1016,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 `;
 }
-function detectTailwindMajorVersion(projectRoot) {
+function detectTailwindMajorVersion2(projectRoot) {
   const packageJsonPath = path4.join(projectRoot, "package.json");
   if (!fs4.existsSync(packageJsonPath)) return 4;
   try {
@@ -982,7 +1031,16 @@ function detectTailwindMajorVersion(projectRoot) {
     return 4;
   }
 }
-function getThemeCSS(tailwindMajor, mode) {
+var DINACHI_THEME_PREFIXES = ["--color-", "--radius-"];
+function extractPreservedThemeVars(css) {
+  const themeMatch = css.match(/@theme\s+inline\s*\{([^}]*)\}/);
+  if (!themeMatch) return [];
+  return themeMatch[1].split("\n").map((line) => line.trim()).filter((line) => {
+    if (!line || line.startsWith("//") || line.startsWith("/*")) return false;
+    return line.startsWith("--") && !DINACHI_THEME_PREFIXES.some((p) => line.startsWith(p));
+  });
+}
+function getThemeCSS(tailwindMajor, mode, preservedThemeVars = []) {
   const lightVars = `:root {
   --background: oklch(0.986 0.0034 145.5499);
   --foreground: oklch(0.1459 0.0497 142.4953);
@@ -1032,6 +1090,7 @@ function getThemeCSS(tailwindMajor, mode) {
       parts.push('@import "tailwindcss";');
     }
     parts.push(lightVars, darkVars);
+    const preservedLines = preservedThemeVars.length > 0 ? "\n" + preservedThemeVars.map((v) => `  ${v}`).join("\n") : "";
     parts.push(`@theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -1055,7 +1114,7 @@ function getThemeCSS(tailwindMajor, mode) {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 4px);${preservedLines}
 }`);
     parts.push(`@layer base {
   * {
@@ -1081,6 +1140,16 @@ function getThemeCSS(tailwindMajor, mode) {
   }
   return parts.join("\n\n") + "\n";
 }
+function stripConflictingCSS(css) {
+  let result = css;
+  result = result.replace(/@media\s*\(\s*prefers-color-scheme\s*:\s*dark\s*\)\s*\{[\s\S]*?\n\}/g, "");
+  result = result.replace(/:root\s*\{[^}]*\}/g, "");
+  result = result.replace(/\.dark\s*\{[^}]*\}/g, "");
+  result = result.replace(/@theme\s+inline\s*\{[^}]*\}/g, "");
+  result = result.replace(/(?:^|\n)body\s*\{[^}]*\}/g, "");
+  result = result.replace(/\n{3,}/g, "\n\n");
+  return result.trim();
+}
 async function injectThemeCSS(cssFilePath, tailwindMajor) {
   await fs4.ensureDir(path4.dirname(cssFilePath));
   if (fs4.existsSync(cssFilePath)) {
@@ -1088,8 +1157,11 @@ async function injectThemeCSS(cssFilePath, tailwindMajor) {
     if (existing.includes("--primary:")) {
       return { path: cssFilePath, skipped: true };
     }
-    const theme2 = getThemeCSS(tailwindMajor, "append");
-    await fs4.writeFile(cssFilePath, existing.trimEnd() + "\n\n" + theme2);
+    const preservedVars = tailwindMajor >= 4 ? extractPreservedThemeVars(existing) : [];
+    const cleaned = stripConflictingCSS(existing);
+    const theme2 = getThemeCSS(tailwindMajor, "append", preservedVars);
+    const result = cleaned.length > 0 ? cleaned + "\n\n" + theme2 : getThemeCSS(tailwindMajor, "full", preservedVars);
+    await fs4.writeFile(cssFilePath, result);
     return { path: cssFilePath, updated: true };
   }
   const theme = getThemeCSS(tailwindMajor, "full");
@@ -1267,7 +1339,9 @@ async function ensureAtAlias(projectRoot, srcDir, isTypeScript) {
     }
   }
   const aliasTarget = srcDir === "." ? "*" : `${srcDir}/*`;
-  const alreadyConfigured = compilerOptions.baseUrl === "." && Array.isArray(paths["@/*"]) && paths["@/*"][0] === aliasTarget;
+  const aliasTargetAlt = srcDir === "." ? "./*" : `./${srcDir}/*`;
+  const existingAlias = paths["@/*"]?.[0];
+  const alreadyConfigured = compilerOptions.baseUrl === "." && existingAlias === aliasTarget || existingAlias === aliasTargetAlt;
   if (alreadyConfigured) {
     return { path: configPath };
   }
@@ -1302,7 +1376,7 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
   const projectConfig = detectProjectType();
   console.log(chalk2.gray(`Detected ${projectConfig.framework} project`));
   console.log();
-  const response = await prompts([
+  const response = await prompts2([
     {
       type: "text",
       name: "componentsPath",
@@ -1332,7 +1406,7 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
     const utilsContent = createUtilsFileContent();
     await fs4.writeFile(utilsFilePath, utilsContent);
     spinner.text = "Setting up color theme...";
-    const tailwindMajor = detectTailwindMajorVersion(projectRoot);
+    const tailwindMajor = detectTailwindMajorVersion2(projectRoot);
     const cssFilePath = path4.resolve(projectRoot, projectConfig.cssPath);
     const themeCSSResult = await injectThemeCSS(cssFilePath, tailwindMajor);
     let twColorConfigResult = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [

package/templates/button/button.tsx

@@ -39,11 +39,13 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, size, render, nativeButton, ...props }, ref) => {
     return (
       <BaseButton
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        render={render}
+        nativeButton={render ? (nativeButton ?? false) : nativeButton}
         {...props}
       />
     )

package/templates/menu/menu.tsx

@@ -30,8 +30,8 @@ const MenuTrigger = React.forwardRef<
       "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium",
       "hover:bg-accent hover:text-accent-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-popup-open:bg-accent data-popup-open:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
@@ -75,10 +75,10 @@ const MenuContent = React.forwardRef<
       <MenuPrimitive.Popup
         ref={ref}
         className={cn(
-          "z-50 min-w-[10rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          "origin-[var(--transform-origin)] outline-none",
-          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          "z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "origin-(--transform-origin) outline-none",
+          "data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95",
+          "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
           className
         )}
         {...props}
@@ -99,8 +99,8 @@ const MenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -118,8 +118,8 @@ const MenuCheckboxItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       className
     )}
     checked={checked}
@@ -150,14 +150,14 @@ const MenuRadioItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       className
     )}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <Circle className="h-2 w-2 fill-current data-[checked]:block data-[unchecked]:hidden" />
+      <Circle className="h-2 w-2 fill-current data-checked:block data-unchecked:hidden" />
     </span>
     {children}
   </MenuPrimitive.RadioItem>
@@ -226,9 +226,9 @@ const MenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+      "data-popup-open:bg-accent data-popup-open:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -249,10 +249,10 @@ const MenuSubContent = React.forwardRef<
       <MenuPrimitive.Popup
         ref={ref}
         className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          "origin-[var(--transform-origin)] outline-none",
-          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "origin-(--transform-origin) outline-none",
+          "data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95",
+          "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
           className
         )}
         {...props}