benflux-ui 0.1.3 → 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";
@@ -70,6 +70,9 @@ async function hasTailwind(cwd) {
   const version = await detectTailwindVersion(cwd);
   return version !== null;
 }
+async function hasSrcDir(cwd) {
+  return import_fs_extra.default.pathExists(import_path.default.join(cwd, "src"));
+}
 async function getComponentsPath(cwd) {
   const candidates = [
     "src/components/ui",
@@ -83,11 +86,8 @@ async function getComponentsPath(cwd) {
       return candidate;
     }
   }
-  const framework = await detectFramework(cwd);
-  if (framework === "next") {
-    return "src/components/ui";
-  }
-  return "src/components/ui";
+  const useSrc = await hasSrcDir(cwd);
+  return useSrc ? "src/components/ui" : "components/ui";
 }
 
 // src/commands/init.ts
@@ -97,6 +97,7 @@ async function initCommand(options) {
   const framework = await detectFramework(cwd);
   const pm = await detectPackageManager(cwd);
   const hasTw = await hasTailwind(cwd);
+  const useSrc = await hasSrcDir(cwd);
   const defaultPath = await getComponentsPath(cwd);
   clack.note(
     [
@@ -149,25 +150,28 @@ async function initCommand(options) {
   const componentsPath = import_path2.default.join(cwd, settings.componentsDir);
   await import_fs_extra2.default.ensureDir(componentsPath);
   spinner3.stop(`Components directory: ${import_picocolors.default.cyan(settings.componentsDir)}`);
+  const libDir = useSrc ? "src/lib" : "lib";
+  const globalsCss = useSrc ? "src/app/globals.css" : "app/globals.css";
+  const componentsAlias = `@/${settings.componentsDir.replace(/^src\//, "")}`;
   spinner3.start("Creating benflux-ui.json config...");
   const config = {
     $schema: "https://benflux-ui.vercel.app/schema.json",
     style: "default",
     typescript: settings.typescript,
     tailwind: {
-      config: hasTw ? "tailwind.config.ts" : "tailwind.config.ts",
-      css: "src/app/globals.css",
+      config: "tailwind.config.ts",
+      css: globalsCss,
       baseColor: "default"
     },
     aliases: {
-      components: `@/${settings.componentsDir.replace("src/", "")}`,
+      components: componentsAlias,
       utils: "@/lib/utils"
     }
   };
   await import_fs_extra2.default.writeJson(import_path2.default.join(cwd, "benflux-ui.json"), config, { spaces: 2 });
   spinner3.stop("benflux-ui.json created");
   spinner3.start("Creating utility functions...");
-  const utilsDir = import_path2.default.join(cwd, "src/lib");
+  const utilsDir = import_path2.default.join(cwd, libDir);
   await import_fs_extra2.default.ensureDir(utilsDir);
   await import_fs_extra2.default.writeFile(
     import_path2.default.join(utilsDir, "utils.ts"),
@@ -179,7 +183,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 `
   );
-  spinner3.stop("lib/utils.ts created");
+  spinner3.stop(`${libDir}/utils.ts created`);
   if (settings.installDeps) {
     spinner3.start(`Installing core dependencies with ${pm}...`);
     try {
@@ -209,11 +213,12 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 // src/commands/add.ts
-var import_path3 = __toESM(require("path"));
 var clack2 = __toESM(require("@clack/prompts"));
-var import_picocolors2 = __toESM(require("picocolors"));
-var import_fs_extra3 = __toESM(require("fs-extra"));
+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"));
+var import_picocolors2 = __toESM(require("picocolors"));
 
 // src/utils/registry.ts
 var REGISTRY = [
@@ -804,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 ")));
@@ -815,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({
+    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?",
-      options: sorted.map((c) => ({
-        label: c.name,
-        hint: `${categoryLabel[c.category] ?? c.category} \u2014 ${c.description}`,
-        value: c.name
-      }))
+      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;
@@ -844,7 +860,9 @@ async function addCommand(components, options) {
   const validComponents = selectedComponents.map((name) => {
     const component = getComponent(name);
     if (!component) {
-      clack2.log.warn(`Component ${import_picocolors2.default.yellow(name)} not found. Use ${import_picocolors2.default.cyan("benflux-ui list")} to see available components.`);
+      clack2.log.warn(
+        `Component ${import_picocolors2.default.yellow(name)} not found. Use ${import_picocolors2.default.cyan("benflux-ui list")} to see available components.`
+      );
       return null;
     }
     return component;
@@ -893,25 +911,26 @@ async function addCommand(components, options) {
     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)`);
+        spinner3.stop(
+          `${import_picocolors2.default.yellow("skipped")} ${component.name} (already exists \u2014 use --overwrite to replace)`
+        );
         continue;
       }
-      const sourcePath = import_path3.default.join(
-        cwd,
-        "node_modules/@benflux-ui/react/src",
-        file
-      );
-      if (await import_fs_extra3.default.pathExists(sourcePath)) {
-        await import_fs_extra3.default.ensureDir(import_path3.default.dirname(targetPath));
-        await import_fs_extra3.default.copy(sourcePath, targetPath);
+      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)) {
+        await import_fs_extra3.default.copy(localSrc, targetPath);
       } else {
-        await import_fs_extra3.default.ensureDir(import_path3.default.dirname(targetPath));
-        await import_fs_extra3.default.writeFile(
-          targetPath,
-          `// ${component.name} \u2014 Install @benflux-ui/react to get the full component
-export {} from "@benflux-ui/react"
-`
-        );
+        const url = `https://unpkg.com/@benflux-ui/react@latest/src/${file}`;
+        try {
+          const res = await fetch(url);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const source = await res.text();
+          await import_fs_extra3.default.writeFile(targetPath, source, "utf-8");
+        } catch (err) {
+          spinner3.stop(import_picocolors2.default.red(`Failed to fetch ${file}: ${err.message}`));
+          clack2.log.warn(`Download manually from: ${url}`);
+        }
       }
     }
     spinner3.stop(`${import_picocolors2.default.green("\u2713")} Added ${component.name}`);
@@ -921,7 +940,11 @@ export {} from "@benflux-ui/react"
       import_picocolors2.default.green("\u2713") + " Components added successfully!",
       "",
       import_picocolors2.default.bold("Usage:"),
-      `  ${import_picocolors2.default.cyan(`import { ${validComponents.map((c) => c?.name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("")).join(", ")} } from "@benflux-ui/react"`)}`
+      `  ${import_picocolors2.default.cyan(
+        `import { ${validComponents.map(
+          (c) => c?.name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("")
+        ).join(", ")} } from "@benflux-ui/react"`
+      )}`
     ].join("\n")
   );
 }

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";
@@ -88,6 +88,9 @@ async function hasTailwind(cwd) {
   const version = await detectTailwindVersion(cwd);
   return version !== null;
 }
+async function hasSrcDir(cwd) {
+  return import_fs_extra.default.pathExists(import_path.default.join(cwd, "src"));
+}
 async function getComponentsPath(cwd) {
   const candidates = [
     "src/components/ui",
@@ -101,11 +104,8 @@ async function getComponentsPath(cwd) {
       return candidate;
     }
   }
-  const framework = await detectFramework(cwd);
-  if (framework === "next") {
-    return "src/components/ui";
-  }
-  return "src/components/ui";
+  const useSrc = await hasSrcDir(cwd);
+  return useSrc ? "src/components/ui" : "components/ui";
 }
 
 // src/commands/init.ts
@@ -115,6 +115,7 @@ async function initCommand(options) {
   const framework = await detectFramework(cwd);
   const pm = await detectPackageManager(cwd);
   const hasTw = await hasTailwind(cwd);
+  const useSrc = await hasSrcDir(cwd);
   const defaultPath = await getComponentsPath(cwd);
   clack.note(
     [
@@ -167,25 +168,28 @@ async function initCommand(options) {
   const componentsPath = import_path2.default.join(cwd, settings.componentsDir);
   await import_fs_extra2.default.ensureDir(componentsPath);
   spinner3.stop(`Components directory: ${import_picocolors.default.cyan(settings.componentsDir)}`);
+  const libDir = useSrc ? "src/lib" : "lib";
+  const globalsCss = useSrc ? "src/app/globals.css" : "app/globals.css";
+  const componentsAlias = `@/${settings.componentsDir.replace(/^src\//, "")}`;
   spinner3.start("Creating benflux-ui.json config...");
   const config = {
     $schema: "https://benflux-ui.vercel.app/schema.json",
     style: "default",
     typescript: settings.typescript,
     tailwind: {
-      config: hasTw ? "tailwind.config.ts" : "tailwind.config.ts",
-      css: "src/app/globals.css",
+      config: "tailwind.config.ts",
+      css: globalsCss,
       baseColor: "default"
     },
     aliases: {
-      components: `@/${settings.componentsDir.replace("src/", "")}`,
+      components: componentsAlias,
       utils: "@/lib/utils"
     }
   };
   await import_fs_extra2.default.writeJson(import_path2.default.join(cwd, "benflux-ui.json"), config, { spaces: 2 });
   spinner3.stop("benflux-ui.json created");
   spinner3.start("Creating utility functions...");
-  const utilsDir = import_path2.default.join(cwd, "src/lib");
+  const utilsDir = import_path2.default.join(cwd, libDir);
   await import_fs_extra2.default.ensureDir(utilsDir);
   await import_fs_extra2.default.writeFile(
     import_path2.default.join(utilsDir, "utils.ts"),
@@ -197,7 +201,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 `
   );
-  spinner3.stop("lib/utils.ts created");
+  spinner3.stop(`${libDir}/utils.ts created`);
   if (settings.installDeps) {
     spinner3.start(`Installing core dependencies with ${pm}...`);
     try {
@@ -227,11 +231,12 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 // src/commands/add.ts
-var import_path3 = __toESM(require("path"));
 var clack2 = __toESM(require("@clack/prompts"));
-var import_picocolors2 = __toESM(require("picocolors"));
-var import_fs_extra3 = __toESM(require("fs-extra"));
+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"));
+var import_picocolors2 = __toESM(require("picocolors"));
 
 // src/utils/registry.ts
 var REGISTRY = [
@@ -831,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 ")));
@@ -842,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({
+    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?",
-      options: sorted.map((c) => ({
-        label: c.name,
-        hint: `${categoryLabel[c.category] ?? c.category} \u2014 ${c.description}`,
-        value: c.name
-      }))
+      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;
@@ -871,7 +887,9 @@ async function addCommand(components, options) {
   const validComponents = selectedComponents.map((name) => {
     const component = getComponent(name);
     if (!component) {
-      clack2.log.warn(`Component ${import_picocolors2.default.yellow(name)} not found. Use ${import_picocolors2.default.cyan("benflux-ui list")} to see available components.`);
+      clack2.log.warn(
+        `Component ${import_picocolors2.default.yellow(name)} not found. Use ${import_picocolors2.default.cyan("benflux-ui list")} to see available components.`
+      );
       return null;
     }
     return component;
@@ -920,25 +938,26 @@ async function addCommand(components, options) {
     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)`);
+        spinner3.stop(
+          `${import_picocolors2.default.yellow("skipped")} ${component.name} (already exists \u2014 use --overwrite to replace)`
+        );
         continue;
       }
-      const sourcePath = import_path3.default.join(
-        cwd,
-        "node_modules/@benflux-ui/react/src",
-        file
-      );
-      if (await import_fs_extra3.default.pathExists(sourcePath)) {
-        await import_fs_extra3.default.ensureDir(import_path3.default.dirname(targetPath));
-        await import_fs_extra3.default.copy(sourcePath, targetPath);
+      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)) {
+        await import_fs_extra3.default.copy(localSrc, targetPath);
       } else {
-        await import_fs_extra3.default.ensureDir(import_path3.default.dirname(targetPath));
-        await import_fs_extra3.default.writeFile(
-          targetPath,
-          `// ${component.name} \u2014 Install @benflux-ui/react to get the full component
-export {} from "@benflux-ui/react"
-`
-        );
+        const url = `https://unpkg.com/@benflux-ui/react@latest/src/${file}`;
+        try {
+          const res = await fetch(url);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const source = await res.text();
+          await import_fs_extra3.default.writeFile(targetPath, source, "utf-8");
+        } catch (err) {
+          spinner3.stop(import_picocolors2.default.red(`Failed to fetch ${file}: ${err.message}`));
+          clack2.log.warn(`Download manually from: ${url}`);
+        }
       }
     }
     spinner3.stop(`${import_picocolors2.default.green("\u2713")} Added ${component.name}`);
@@ -948,7 +967,11 @@ export {} from "@benflux-ui/react"
       import_picocolors2.default.green("\u2713") + " Components added successfully!",
       "",
       import_picocolors2.default.bold("Usage:"),
-      `  ${import_picocolors2.default.cyan(`import { ${validComponents.map((c) => c?.name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("")).join(", ")} } from "@benflux-ui/react"`)}`
+      `  ${import_picocolors2.default.cyan(
+        `import { ${validComponents.map(
+          (c) => c?.name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("")
+        ).join(", ")} } from "@benflux-ui/react"`
+      )}`
     ].join("\n")
   );
 }

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";
@@ -41,6 +41,9 @@ async function hasTailwind(cwd) {
   const version = await detectTailwindVersion(cwd);
   return version !== null;
 }
+async function hasSrcDir(cwd) {
+  return fs.pathExists(path.join(cwd, "src"));
+}
 async function getComponentsPath(cwd) {
   const candidates = [
     "src/components/ui",
@@ -54,11 +57,8 @@ async function getComponentsPath(cwd) {
       return candidate;
     }
   }
-  const framework = await detectFramework(cwd);
-  if (framework === "next") {
-    return "src/components/ui";
-  }
-  return "src/components/ui";
+  const useSrc = await hasSrcDir(cwd);
+  return useSrc ? "src/components/ui" : "components/ui";
 }
 
 // src/commands/init.ts
@@ -68,6 +68,7 @@ async function initCommand(options) {
   const framework = await detectFramework(cwd);
   const pm = await detectPackageManager(cwd);
   const hasTw = await hasTailwind(cwd);
+  const useSrc = await hasSrcDir(cwd);
   const defaultPath = await getComponentsPath(cwd);
   clack.note(
     [
@@ -120,25 +121,28 @@ async function initCommand(options) {
   const componentsPath = path2.join(cwd, settings.componentsDir);
   await fs2.ensureDir(componentsPath);
   spinner3.stop(`Components directory: ${pc.cyan(settings.componentsDir)}`);
+  const libDir = useSrc ? "src/lib" : "lib";
+  const globalsCss = useSrc ? "src/app/globals.css" : "app/globals.css";
+  const componentsAlias = `@/${settings.componentsDir.replace(/^src\//, "")}`;
   spinner3.start("Creating benflux-ui.json config...");
   const config = {
     $schema: "https://benflux-ui.vercel.app/schema.json",
     style: "default",
     typescript: settings.typescript,
     tailwind: {
-      config: hasTw ? "tailwind.config.ts" : "tailwind.config.ts",
-      css: "src/app/globals.css",
+      config: "tailwind.config.ts",
+      css: globalsCss,
       baseColor: "default"
     },
     aliases: {
-      components: `@/${settings.componentsDir.replace("src/", "")}`,
+      components: componentsAlias,
       utils: "@/lib/utils"
     }
   };
   await fs2.writeJson(path2.join(cwd, "benflux-ui.json"), config, { spaces: 2 });
   spinner3.stop("benflux-ui.json created");
   spinner3.start("Creating utility functions...");
-  const utilsDir = path2.join(cwd, "src/lib");
+  const utilsDir = path2.join(cwd, libDir);
   await fs2.ensureDir(utilsDir);
   await fs2.writeFile(
     path2.join(utilsDir, "utils.ts"),
@@ -150,7 +154,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 `
   );
-  spinner3.stop("lib/utils.ts created");
+  spinner3.stop(`${libDir}/utils.ts created`);
   if (settings.installDeps) {
     spinner3.start(`Installing core dependencies with ${pm}...`);
     try {
@@ -180,11 +184,12 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 // src/commands/add.ts
-import path3 from "path";
 import * as clack2 from "@clack/prompts";
-import pc2 from "picocolors";
-import fs3 from "fs-extra";
+import checkbox, { Separator } from "@inquirer/checkbox";
 import { execa as execa2 } from "execa";
+import fs3 from "fs-extra";
+import path3 from "path";
+import pc2 from "picocolors";
 
 // src/utils/registry.ts
 var REGISTRY = [
@@ -784,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 ")));
@@ -795,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({
+    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?",
-      options: sorted.map((c) => ({
-        label: c.name,
-        hint: `${categoryLabel[c.category] ?? c.category} \u2014 ${c.description}`,
-        value: c.name
-      }))
+      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;
@@ -824,7 +840,9 @@ async function addCommand(components, options) {
   const validComponents = selectedComponents.map((name) => {
     const component = getComponent(name);
     if (!component) {
-      clack2.log.warn(`Component ${pc2.yellow(name)} not found. Use ${pc2.cyan("benflux-ui list")} to see available components.`);
+      clack2.log.warn(
+        `Component ${pc2.yellow(name)} not found. Use ${pc2.cyan("benflux-ui list")} to see available components.`
+      );
       return null;
     }
     return component;
@@ -873,25 +891,26 @@ async function addCommand(components, options) {
     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)`);
+        spinner3.stop(
+          `${pc2.yellow("skipped")} ${component.name} (already exists \u2014 use --overwrite to replace)`
+        );
         continue;
       }
-      const sourcePath = path3.join(
-        cwd,
-        "node_modules/@benflux-ui/react/src",
-        file
-      );
-      if (await fs3.pathExists(sourcePath)) {
-        await fs3.ensureDir(path3.dirname(targetPath));
-        await fs3.copy(sourcePath, targetPath);
+      await fs3.ensureDir(path3.dirname(targetPath));
+      const localSrc = path3.join(cwd, "node_modules/@benflux-ui/react/src", file);
+      if (await fs3.pathExists(localSrc)) {
+        await fs3.copy(localSrc, targetPath);
       } else {
-        await fs3.ensureDir(path3.dirname(targetPath));
-        await fs3.writeFile(
-          targetPath,
-          `// ${component.name} \u2014 Install @benflux-ui/react to get the full component
-export {} from "@benflux-ui/react"
-`
-        );
+        const url = `https://unpkg.com/@benflux-ui/react@latest/src/${file}`;
+        try {
+          const res = await fetch(url);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const source = await res.text();
+          await fs3.writeFile(targetPath, source, "utf-8");
+        } catch (err) {
+          spinner3.stop(pc2.red(`Failed to fetch ${file}: ${err.message}`));
+          clack2.log.warn(`Download manually from: ${url}`);
+        }
       }
     }
     spinner3.stop(`${pc2.green("\u2713")} Added ${component.name}`);
@@ -901,7 +920,11 @@ export {} from "@benflux-ui/react"
       pc2.green("\u2713") + " Components added successfully!",
       "",
       pc2.bold("Usage:"),
-      `  ${pc2.cyan(`import { ${validComponents.map((c) => c?.name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("")).join(", ")} } from "@benflux-ui/react"`)}`
+      `  ${pc2.cyan(
+        `import { ${validComponents.map(
+          (c) => c?.name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("")
+        ).join(", ")} } from "@benflux-ui/react"`
+      )}`
     ].join("\n")
   );
 }

package/package.json

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