benflux-ui 0.1.2 → 0.1.4

package/dist/bin/benflux-ui.js

@@ -28,11 +28,11 @@ var import_commander = require("commander");
 var import_picocolors5 = __toESM(require("picocolors"));
 
 // src/commands/init.ts
-var import_path2 = __toESM(require("path"));
 var clack = __toESM(require("@clack/prompts"));
-var import_picocolors = __toESM(require("picocolors"));
-var import_fs_extra2 = __toESM(require("fs-extra"));
 var import_execa = require("execa");
+var import_fs_extra2 = __toESM(require("fs-extra"));
+var import_path2 = __toESM(require("path"));
+var import_picocolors = __toESM(require("picocolors"));
 
 // src/utils/detect-framework.ts
 var import_path = __toESM(require("path"));
@@ -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,11 @@ 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_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 = [
@@ -815,26 +819,23 @@ async function addCommand(components, options) {
   const defaultDir = options.path ?? await getComponentsPath(cwd);
   let selectedComponents = components;
   if (selectedComponents.length === 0) {
-    const categories = [...new Set(REGISTRY.map((c) => c.category))];
-    const category = await clack2.select({
-      message: "Select component category:",
-      options: [
-        { label: "All components", value: "all" },
-        ...categories.map((c) => ({
-          label: c.charAt(0).toUpperCase() + c.slice(1),
-          value: c
-        }))
-      ]
-    });
-    if (clack2.isCancel(category)) {
-      clack2.cancel("Cancelled.");
-      process.exit(0);
-    }
-    const componentOptions = category === "all" ? REGISTRY : REGISTRY.filter((c) => c.category === category);
+    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: "Select components to add:",
-      options: componentOptions.map((c) => ({
-        label: `${c.name} \u2014 ${c.description}`,
+      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
       }))
     });
@@ -847,7 +848,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;
@@ -896,25 +899,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}`);
@@ -924,7 +928,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

@@ -46,11 +46,11 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/commands/init.ts
-var import_path2 = __toESM(require("path"));
 var clack = __toESM(require("@clack/prompts"));
-var import_picocolors = __toESM(require("picocolors"));
-var import_fs_extra2 = __toESM(require("fs-extra"));
 var import_execa = require("execa");
+var import_fs_extra2 = __toESM(require("fs-extra"));
+var import_path2 = __toESM(require("path"));
+var import_picocolors = __toESM(require("picocolors"));
 
 // src/utils/detect-framework.ts
 var import_path = __toESM(require("path"));
@@ -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,11 @@ 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_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 = [
@@ -842,26 +846,23 @@ async function addCommand(components, options) {
   const defaultDir = options.path ?? await getComponentsPath(cwd);
   let selectedComponents = components;
   if (selectedComponents.length === 0) {
-    const categories = [...new Set(REGISTRY.map((c) => c.category))];
-    const category = await clack2.select({
-      message: "Select component category:",
-      options: [
-        { label: "All components", value: "all" },
-        ...categories.map((c) => ({
-          label: c.charAt(0).toUpperCase() + c.slice(1),
-          value: c
-        }))
-      ]
-    });
-    if (clack2.isCancel(category)) {
-      clack2.cancel("Cancelled.");
-      process.exit(0);
-    }
-    const componentOptions = category === "all" ? REGISTRY : REGISTRY.filter((c) => c.category === category);
+    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: "Select components to add:",
-      options: componentOptions.map((c) => ({
-        label: `${c.name} \u2014 ${c.description}`,
+      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
       }))
     });
@@ -874,7 +875,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;
@@ -923,25 +926,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}`);
@@ -951,7 +955,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

@@ -1,9 +1,9 @@
 // src/commands/init.ts
-import path2 from "path";
 import * as clack from "@clack/prompts";
-import pc from "picocolors";
-import fs2 from "fs-extra";
 import { execa } from "execa";
+import fs2 from "fs-extra";
+import path2 from "path";
+import pc from "picocolors";
 
 // src/utils/detect-framework.ts
 import path from "path";
@@ -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,11 @@ 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 { execa as execa2 } from "execa";
+import fs3 from "fs-extra";
+import path3 from "path";
+import pc2 from "picocolors";
 
 // src/utils/registry.ts
 var REGISTRY = [
@@ -795,26 +799,23 @@ async function addCommand(components, options) {
   const defaultDir = options.path ?? await getComponentsPath(cwd);
   let selectedComponents = components;
   if (selectedComponents.length === 0) {
-    const categories = [...new Set(REGISTRY.map((c) => c.category))];
-    const category = await clack2.select({
-      message: "Select component category:",
-      options: [
-        { label: "All components", value: "all" },
-        ...categories.map((c) => ({
-          label: c.charAt(0).toUpperCase() + c.slice(1),
-          value: c
-        }))
-      ]
-    });
-    if (clack2.isCancel(category)) {
-      clack2.cancel("Cancelled.");
-      process.exit(0);
-    }
-    const componentOptions = category === "all" ? REGISTRY : REGISTRY.filter((c) => c.category === category);
+    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: "Select components to add:",
-      options: componentOptions.map((c) => ({
-        label: `${c.name} \u2014 ${c.description}`,
+      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
       }))
     });
@@ -827,7 +828,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;
@@ -876,25 +879,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}`);
@@ -904,7 +908,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.2",
+  "version": "0.1.4",
   "description": "CLI for adding Benflux UI components to your project",
   "keywords": [
     "benflux-ui",