feat: update dependencies, improve CLI utility creation, and enhance CreativePricing component styling

Author: afsar-dev

registry-cli.json

@@ -130,7 +130,11 @@
       "name": "future-navbar",
       "type": "registry:component",
       "devDependencies": [],
-      "dependencies": ["lucide-react", "class-variance-authority"],
+      "dependencies": [
+        "lucide-react",
+        "class-variance-authority",
+        "@left4code/svg-renderer"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -470,7 +474,6 @@
         }
       ]
     },
-    
 
     {
       "name": "playing-card",
@@ -1020,4 +1023,4 @@
       ]
     }
   ]
-}
+}

src/cli/bin/index.js

@@ -135,8 +135,13 @@ try {
     process.exit(1);
   }
 
+  const hasSrc = fs.existsSync(path.join(process.cwd(), "src"));
+  const baseLibDir = hasSrc
+    ? path.join(process.cwd(), "src", "lib")
+    : path.join(process.cwd(), "lib");
+
   const cnContent = {
-    ts: `import { ClassValue, clsx } from "clsx";
+    ts: `import { type ClassValue, clsx } from "clsx";
     import { twMerge } from "tailwind-merge";
 
     export function cn(...inputs: ClassValue[]) {
@@ -150,16 +155,22 @@ try {
     }`,
   };
 
-  const utilsPath = path.join(process.cwd(), "lib");
   const cnPath = path.join(
-    utilsPath,
+    baseLibDir,
     `utils.${language === "js" ? "js" : "ts"}`,
   );
 
+  let utilsCreated = false;
+  // Create utils file if it doesn't exist
   if (!fs.existsSync(cnPath)) {
-    await fs.promises.mkdir(utilsPath, { recursive: true });
+    await fs.promises.mkdir(baseLibDir, { recursive: true });
     await fs.promises.writeFile(cnPath, cnContent[language], "utf8");
-    console.log(colors.green(`🛠️ Created lib/utils${language}`));
+    console.log(
+      colors.green(
+        `🛠️ Created ${hasSrc ? "src/lib" : "lib"}/utils.${language}`,
+      ),
+    );
+    utilsCreated = true;
   }
 
   for (const file of match.files) {
@@ -171,19 +182,28 @@ try {
   if (match?.dependencies?.length) {
     const pm = detectPackageManager();
     const s2 = spinner();
-    s2.start(
-      `📦 Installing dependencies with ${pm}: ${match.dependencies.join(", ")}`,
-    );
 
-    const cmd = ["add", ...match.dependencies];
-    const fallback = ["install", ...match.dependencies];
+    const deps = [...(match.dependencies || [])];
+    if (utilsCreated) {
+      deps.push("clsx", "tailwind-merge");
+    }
 
-    try {
-      await execa(pm, pm === "npm" ? fallback : cmd, { stdio: "inherit" });
-      s2.stop(colors.green("✅ Dependencies installed."));
-    } catch (err) {
-      s2.stop(colors.red("❌ Failed to install dependencies."));
-      console.error(err);
+    if (deps.length > 0) {
+      const uniqueDeps = [...new Set(deps)];
+      s2.start(
+        `📦 Installing dependencies with ${pm}: ${uniqueDeps.join(", ")}`,
+      );
+
+      const cmd = ["add", ...uniqueDeps];
+      const fallback = ["install", ...uniqueDeps];
+
+      try {
+        await execa(pm, pm === "npm" ? fallback : cmd, { stdio: "inherit" });
+        s2.stop(colors.green("✅ Dependencies installed."));
+      } catch (err) {
+        s2.stop(colors.red("❌ Failed to install dependencies."));
+        console.error(err);
+      }
     }
   }
 

src/cli/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nurui",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Add beautiful components with one command",
   "bin": {
     "nurui": "./bin/index.js"

src/cli/package.json

@@ -25,17 +25,17 @@ function CreativePricing({
 }) {
   return (
     <div className="w-full max-w-6xl mx-auto px-4">
-      <div className="text-center space-y-6 mb-16">
-        <div className="font-handwritten text-xl text-blue-500 rotate-[-1deg]">
+      <div className="text-center space-y-6 mb-6 lg:mb-16">
+        <div className="font-handwritten text-xl text-blue-500 rotate-[-1deg] hidden lg:block">
           {tag}
         </div>
         <div className="relative">
-          <h2 className="text-4xl md:text-5xl font-bold font-handwritten text-zinc-900 dark:text-white rotate-[-1deg]">
+          <h2 className="text-2xl md:text-5xl font-bold font-handwritten text-zinc-900 dark:text-white rotate-[-1deg]">
             {title}
-            <div className="absolute -right-12 top-0 text-amber-500 rotate-12">
+            <div className="absolute -right-12 top-0 text-amber-500 rotate-12 hidden lg:block">
               ✨
             </div>
-            <div className="absolute -left-8 bottom-0 text-blue-500 -rotate-12">
+            <div className="absolute -left-8 bottom-0 text-blue-500 -rotate-12 hidden lg:block">
               ⭐️
             </div>
           </h2>
@@ -156,7 +156,7 @@ function CreativePricing({
           </div>
         ))}
       </div>
-      <div className="absolute -z-10 inset-0 overflow-hidden">
+      <div className="absolute -z-10 inset-0 overflow-hidden hidden lg:block">
         <div className="absolute top-40 left-20 text-4xl rotate-12">✎</div>
         <div className="absolute bottom-40 right-20 text-4xl -rotate-12">
           ✏️