@dinachi/cli 0.6.1 → 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";
@@ -699,7 +674,8 @@ async function ensureTW4Plugin(deps, cssFilePath) {
   let updated;
   if (importMatch) {
     updated = content.replace(importMatch[0], `${importMatch[0].trimEnd()}
-${pluginLine}`);
+${pluginLine}
+`);
   } else {
     updated = `${pluginLine}
 ${content}`;
@@ -769,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)) {
@@ -777,28 +766,27 @@ 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("[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) => {
@@ -901,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);
@@ -996,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) {
@@ -1032,7 +1031,16 @@ function detectTailwindMajorVersion2(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);
@@ -1082,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);
@@ -1105,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 {
   * {
@@ -1148,9 +1157,10 @@ async function injectThemeCSS(cssFilePath, tailwindMajor) {
     if (existing.includes("--primary:")) {
       return { path: cssFilePath, skipped: true };
     }
+    const preservedVars = tailwindMajor >= 4 ? extractPreservedThemeVars(existing) : [];
     const cleaned = stripConflictingCSS(existing);
-    const theme2 = getThemeCSS(tailwindMajor, "append");
-    const result = cleaned.length > 0 ? cleaned + "\n\n" + theme2 : getThemeCSS(tailwindMajor, "full");
+    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 };
   }
@@ -1329,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 };
   }
@@ -1364,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.6.1",
+  "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}