benflux-ui 0.1.4 → 0.1.5

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;

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;

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "benflux-ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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",