benflux-ui 0.1.4 → 0.1.6

package/dist/bin/benflux-ui.js

@@ -35,8 +35,8 @@ var import_path2 = __toESM(require("path"));
 var import_picocolors = __toESM(require("picocolors"));
 
 // src/utils/detect-framework.ts
-var import_path = __toESM(require("path"));
 var import_fs_extra = __toESM(require("fs-extra"));
+var import_path = __toESM(require("path"));
 async function detectFramework(cwd) {
   const pkgPath = import_path.default.join(cwd, "package.json");
   if (!await import_fs_extra.default.pathExists(pkgPath)) return "unknown";
@@ -214,6 +214,7 @@ export function cn(...inputs: ClassValue[]) {
 
 // src/commands/add.ts
 var clack2 = __toESM(require("@clack/prompts"));
+var import_checkbox = __toESM(require("@inquirer/checkbox"));
 var import_execa2 = require("execa");
 var import_fs_extra3 = __toESM(require("fs-extra"));
 var import_path3 = __toESM(require("path"));
@@ -808,6 +809,16 @@ function getComponent(name) {
 }
 
 // src/commands/add.ts
+var CATEGORY_ORDER = ["layout", "inputs", "navigation", "feedback", "data-display", "ai", "wow"];
+var CATEGORY_LABEL = {
+  layout: "Layout",
+  inputs: "Inputs",
+  navigation: "Navigation",
+  feedback: "Feedback",
+  "data-display": "Data Display",
+  ai: "AI",
+  wow: "WOW Effects"
+};
 async function addCommand(components, options) {
   const cwd = process.cwd();
   clack2.intro(import_picocolors2.default.bgCyan(import_picocolors2.default.black(" Benflux UI \u2014 Add Components ")));
@@ -819,28 +830,29 @@ async function addCommand(components, options) {
   const defaultDir = options.path ?? await getComponentsPath(cwd);
   let selectedComponents = components;
   if (selectedComponents.length === 0) {
-    const categoryLabel = {
-      layout: "Layout",
-      inputs: "Inputs",
-      navigation: "Navigation",
-      feedback: "Feedback",
-      "data-display": "Data Display",
-      ai: "AI",
-      wow: "WOW Effects"
-    };
-    const sorted = [...REGISTRY].sort(
-      (a, b) => a.category === b.category ? a.name.localeCompare(b.name) : a.category.localeCompare(b.category)
-    );
-    const selected = await clack2.multiselect({
-      message: "Which components would you like to add?  \u2191\u2193 navigate \xB7 Space select \xB7 Enter confirm",
-      options: sorted.map((c) => ({
-        label: c.name,
-        hint: `${categoryLabel[c.category] ?? c.category} \u2014 ${c.description}`,
-        value: c.name
-      }))
+    const byCategory = /* @__PURE__ */ new Map();
+    for (const c of REGISTRY) {
+      const list = byCategory.get(c.category) ?? [];
+      list.push(c);
+      byCategory.set(c.category, list);
+    }
+    const choices = [];
+    for (const cat of CATEGORY_ORDER) {
+      const items = byCategory.get(cat);
+      if (!items?.length) continue;
+      choices.push(new import_checkbox.Separator(`\u2500\u2500 ${CATEGORY_LABEL[cat] ?? cat} \u2500\u2500`));
+      for (const c of items.sort((a, b) => a.name.localeCompare(b.name))) {
+        choices.push({ name: c.name, value: c.name, description: c.description });
+      }
+    }
+    const selected = await (0, import_checkbox.default)({
+      message: "Which components would you like to add?",
+      choices,
+      pageSize: 16,
+      loop: false
     });
-    if (clack2.isCancel(selected)) {
-      clack2.cancel("Cancelled.");
+    if (!selected.length) {
+      clack2.cancel("No components selected.");
       process.exit(0);
     }
     selectedComponents = selected;
@@ -896,14 +908,13 @@ async function addCommand(components, options) {
   for (const component of validComponents) {
     if (!component) continue;
     spinner3.start(`Adding ${import_picocolors2.default.cyan(component.name)}...`);
+    let skipped = true;
     for (const file of component.files) {
       const targetPath = import_path3.default.join(cwd, defaultDir, import_path3.default.basename(file));
-      if (await import_fs_extra3.default.pathExists(targetPath) && !options.overwrite) {
-        spinner3.stop(
-          `${import_picocolors2.default.yellow("skipped")} ${component.name} (already exists \u2014 use --overwrite to replace)`
-        );
-        continue;
+      if (await import_fs_extra3.default.pathExists(targetPath)) {
+        if (!options.overwrite) continue;
       }
+      skipped = false;
       await import_fs_extra3.default.ensureDir(import_path3.default.dirname(targetPath));
       const localSrc = import_path3.default.join(cwd, "node_modules/@benflux-ui/react/src", file);
       if (await import_fs_extra3.default.pathExists(localSrc)) {
@@ -918,10 +929,15 @@ async function addCommand(components, options) {
         } catch (err) {
           spinner3.stop(import_picocolors2.default.red(`Failed to fetch ${file}: ${err.message}`));
           clack2.log.warn(`Download manually from: ${url}`);
+          continue;
         }
       }
     }
-    spinner3.stop(`${import_picocolors2.default.green("\u2713")} Added ${component.name}`);
+    if (skipped) {
+      spinner3.stop(`${import_picocolors2.default.yellow("skipped")} ${component.name} \u2014 already exists (use --overwrite to replace)`);
+    } else {
+      spinner3.stop(`${import_picocolors2.default.green("\u2713")} Added ${component.name}`);
+    }
   }
   clack2.outro(
     [

package/dist/index.js

@@ -53,8 +53,8 @@ var import_path2 = __toESM(require("path"));
 var import_picocolors = __toESM(require("picocolors"));
 
 // src/utils/detect-framework.ts
-var import_path = __toESM(require("path"));
 var import_fs_extra = __toESM(require("fs-extra"));
+var import_path = __toESM(require("path"));
 async function detectFramework(cwd) {
   const pkgPath = import_path.default.join(cwd, "package.json");
   if (!await import_fs_extra.default.pathExists(pkgPath)) return "unknown";
@@ -232,6 +232,7 @@ export function cn(...inputs: ClassValue[]) {
 
 // src/commands/add.ts
 var clack2 = __toESM(require("@clack/prompts"));
+var import_checkbox = __toESM(require("@inquirer/checkbox"));
 var import_execa2 = require("execa");
 var import_fs_extra3 = __toESM(require("fs-extra"));
 var import_path3 = __toESM(require("path"));
@@ -835,6 +836,16 @@ function searchComponents(query) {
 }
 
 // src/commands/add.ts
+var CATEGORY_ORDER = ["layout", "inputs", "navigation", "feedback", "data-display", "ai", "wow"];
+var CATEGORY_LABEL = {
+  layout: "Layout",
+  inputs: "Inputs",
+  navigation: "Navigation",
+  feedback: "Feedback",
+  "data-display": "Data Display",
+  ai: "AI",
+  wow: "WOW Effects"
+};
 async function addCommand(components, options) {
   const cwd = process.cwd();
   clack2.intro(import_picocolors2.default.bgCyan(import_picocolors2.default.black(" Benflux UI \u2014 Add Components ")));
@@ -846,28 +857,29 @@ async function addCommand(components, options) {
   const defaultDir = options.path ?? await getComponentsPath(cwd);
   let selectedComponents = components;
   if (selectedComponents.length === 0) {
-    const categoryLabel = {
-      layout: "Layout",
-      inputs: "Inputs",
-      navigation: "Navigation",
-      feedback: "Feedback",
-      "data-display": "Data Display",
-      ai: "AI",
-      wow: "WOW Effects"
-    };
-    const sorted = [...REGISTRY].sort(
-      (a, b) => a.category === b.category ? a.name.localeCompare(b.name) : a.category.localeCompare(b.category)
-    );
-    const selected = await clack2.multiselect({
-      message: "Which components would you like to add?  \u2191\u2193 navigate \xB7 Space select \xB7 Enter confirm",
-      options: sorted.map((c) => ({
-        label: c.name,
-        hint: `${categoryLabel[c.category] ?? c.category} \u2014 ${c.description}`,
-        value: c.name
-      }))
+    const byCategory = /* @__PURE__ */ new Map();
+    for (const c of REGISTRY) {
+      const list = byCategory.get(c.category) ?? [];
+      list.push(c);
+      byCategory.set(c.category, list);
+    }
+    const choices = [];
+    for (const cat of CATEGORY_ORDER) {
+      const items = byCategory.get(cat);
+      if (!items?.length) continue;
+      choices.push(new import_checkbox.Separator(`\u2500\u2500 ${CATEGORY_LABEL[cat] ?? cat} \u2500\u2500`));
+      for (const c of items.sort((a, b) => a.name.localeCompare(b.name))) {
+        choices.push({ name: c.name, value: c.name, description: c.description });
+      }
+    }
+    const selected = await (0, import_checkbox.default)({
+      message: "Which components would you like to add?",
+      choices,
+      pageSize: 16,
+      loop: false
     });
-    if (clack2.isCancel(selected)) {
-      clack2.cancel("Cancelled.");
+    if (!selected.length) {
+      clack2.cancel("No components selected.");
       process.exit(0);
     }
     selectedComponents = selected;
@@ -923,14 +935,13 @@ async function addCommand(components, options) {
   for (const component of validComponents) {
     if (!component) continue;
     spinner3.start(`Adding ${import_picocolors2.default.cyan(component.name)}...`);
+    let skipped = true;
     for (const file of component.files) {
       const targetPath = import_path3.default.join(cwd, defaultDir, import_path3.default.basename(file));
-      if (await import_fs_extra3.default.pathExists(targetPath) && !options.overwrite) {
-        spinner3.stop(
-          `${import_picocolors2.default.yellow("skipped")} ${component.name} (already exists \u2014 use --overwrite to replace)`
-        );
-        continue;
+      if (await import_fs_extra3.default.pathExists(targetPath)) {
+        if (!options.overwrite) continue;
       }
+      skipped = false;
       await import_fs_extra3.default.ensureDir(import_path3.default.dirname(targetPath));
       const localSrc = import_path3.default.join(cwd, "node_modules/@benflux-ui/react/src", file);
       if (await import_fs_extra3.default.pathExists(localSrc)) {
@@ -945,10 +956,15 @@ async function addCommand(components, options) {
         } catch (err) {
           spinner3.stop(import_picocolors2.default.red(`Failed to fetch ${file}: ${err.message}`));
           clack2.log.warn(`Download manually from: ${url}`);
+          continue;
         }
       }
     }
-    spinner3.stop(`${import_picocolors2.default.green("\u2713")} Added ${component.name}`);
+    if (skipped) {
+      spinner3.stop(`${import_picocolors2.default.yellow("skipped")} ${component.name} \u2014 already exists (use --overwrite to replace)`);
+    } else {
+      spinner3.stop(`${import_picocolors2.default.green("\u2713")} Added ${component.name}`);
+    }
   }
   clack2.outro(
     [

package/dist/index.mjs

@@ -6,8 +6,8 @@ import path2 from "path";
 import pc from "picocolors";
 
 // src/utils/detect-framework.ts
-import path from "path";
 import fs from "fs-extra";
+import path from "path";
 async function detectFramework(cwd) {
   const pkgPath = path.join(cwd, "package.json");
   if (!await fs.pathExists(pkgPath)) return "unknown";
@@ -185,6 +185,7 @@ export function cn(...inputs: ClassValue[]) {
 
 // src/commands/add.ts
 import * as clack2 from "@clack/prompts";
+import checkbox, { Separator } from "@inquirer/checkbox";
 import { execa as execa2 } from "execa";
 import fs3 from "fs-extra";
 import path3 from "path";
@@ -788,6 +789,16 @@ function searchComponents(query) {
 }
 
 // src/commands/add.ts
+var CATEGORY_ORDER = ["layout", "inputs", "navigation", "feedback", "data-display", "ai", "wow"];
+var CATEGORY_LABEL = {
+  layout: "Layout",
+  inputs: "Inputs",
+  navigation: "Navigation",
+  feedback: "Feedback",
+  "data-display": "Data Display",
+  ai: "AI",
+  wow: "WOW Effects"
+};
 async function addCommand(components, options) {
   const cwd = process.cwd();
   clack2.intro(pc2.bgCyan(pc2.black(" Benflux UI \u2014 Add Components ")));
@@ -799,28 +810,29 @@ async function addCommand(components, options) {
   const defaultDir = options.path ?? await getComponentsPath(cwd);
   let selectedComponents = components;
   if (selectedComponents.length === 0) {
-    const categoryLabel = {
-      layout: "Layout",
-      inputs: "Inputs",
-      navigation: "Navigation",
-      feedback: "Feedback",
-      "data-display": "Data Display",
-      ai: "AI",
-      wow: "WOW Effects"
-    };
-    const sorted = [...REGISTRY].sort(
-      (a, b) => a.category === b.category ? a.name.localeCompare(b.name) : a.category.localeCompare(b.category)
-    );
-    const selected = await clack2.multiselect({
-      message: "Which components would you like to add?  \u2191\u2193 navigate \xB7 Space select \xB7 Enter confirm",
-      options: sorted.map((c) => ({
-        label: c.name,
-        hint: `${categoryLabel[c.category] ?? c.category} \u2014 ${c.description}`,
-        value: c.name
-      }))
+    const byCategory = /* @__PURE__ */ new Map();
+    for (const c of REGISTRY) {
+      const list = byCategory.get(c.category) ?? [];
+      list.push(c);
+      byCategory.set(c.category, list);
+    }
+    const choices = [];
+    for (const cat of CATEGORY_ORDER) {
+      const items = byCategory.get(cat);
+      if (!items?.length) continue;
+      choices.push(new Separator(`\u2500\u2500 ${CATEGORY_LABEL[cat] ?? cat} \u2500\u2500`));
+      for (const c of items.sort((a, b) => a.name.localeCompare(b.name))) {
+        choices.push({ name: c.name, value: c.name, description: c.description });
+      }
+    }
+    const selected = await checkbox({
+      message: "Which components would you like to add?",
+      choices,
+      pageSize: 16,
+      loop: false
     });
-    if (clack2.isCancel(selected)) {
-      clack2.cancel("Cancelled.");
+    if (!selected.length) {
+      clack2.cancel("No components selected.");
       process.exit(0);
     }
     selectedComponents = selected;
@@ -876,14 +888,13 @@ async function addCommand(components, options) {
   for (const component of validComponents) {
     if (!component) continue;
     spinner3.start(`Adding ${pc2.cyan(component.name)}...`);
+    let skipped = true;
     for (const file of component.files) {
       const targetPath = path3.join(cwd, defaultDir, path3.basename(file));
-      if (await fs3.pathExists(targetPath) && !options.overwrite) {
-        spinner3.stop(
-          `${pc2.yellow("skipped")} ${component.name} (already exists \u2014 use --overwrite to replace)`
-        );
-        continue;
+      if (await fs3.pathExists(targetPath)) {
+        if (!options.overwrite) continue;
       }
+      skipped = false;
       await fs3.ensureDir(path3.dirname(targetPath));
       const localSrc = path3.join(cwd, "node_modules/@benflux-ui/react/src", file);
       if (await fs3.pathExists(localSrc)) {
@@ -898,10 +909,15 @@ async function addCommand(components, options) {
         } catch (err) {
           spinner3.stop(pc2.red(`Failed to fetch ${file}: ${err.message}`));
           clack2.log.warn(`Download manually from: ${url}`);
+          continue;
         }
       }
     }
-    spinner3.stop(`${pc2.green("\u2713")} Added ${component.name}`);
+    if (skipped) {
+      spinner3.stop(`${pc2.yellow("skipped")} ${component.name} \u2014 already exists (use --overwrite to replace)`);
+    } else {
+      spinner3.stop(`${pc2.green("\u2713")} Added ${component.name}`);
+    }
   }
   clack2.outro(
     [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "benflux-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "CLI for adding Benflux UI components to your project",
   "keywords": [
     "benflux-ui",
@@ -35,6 +35,7 @@
   ],
   "dependencies": {
     "@clack/prompts": "^0.7.0",
+    "@inquirer/checkbox": "^5.2.0",
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
     "execa": "^9.2.0",