@catalystsoftware/ui 1.0.16 → 1.0.18

package/README.md

@@ -2,6 +2,16 @@
 
 A comprehensive React component library with 100+ production-ready components for building modern web applications.
 
+## UPDATE
+
+Adding a new line option 'Configure Import Call'. Configures your package.json and tsconfig.json files to allow the use of '#icons' and '#catalyst' in-place of the traditional '~/components/catalyst-ui' and '@catalystsoftware/icons'
+
+```javascript
+import { Command, CommandGroup, CommandItem, CommandList, cn } from '#catalyst'
+import { X } from '#icons'
+```
+Selecting the full installation will also configure your project for this use as well.
+
 ## Installation
 
 ### Quick Start
@@ -101,7 +111,7 @@ Catalyst UI automatically detects and uses your package manager:
 
 ### Config File (Optional)
 
-Create a `catalyst.config.jsonc` file in your project root to customize installation behavior:
+Create a `config.catalyst` file in your project root to customize installation behavior:
 
 ```bash
 bunx @catalystsoftware/ui

package/dist/index.js

@@ -200582,6 +200582,7 @@ import { pathToFileURL } from "url";
 var SOURCE_COMPONENTS_FOLDER = "./dist/components/catalyst-ui";
 var SOURCE_DATA_FOLDER = "./dist/components/catalyst-ui/data";
 var DEFAULT_CONFIG = {
+  version: "1.0.124",
   theme: "blue",
   preset: "MODERN",
   font: "Geist",
@@ -200594,37 +200595,6 @@ var DEFAULT_CONFIG = {
   css: "app/routes/styles/tailwind.css",
   components: "app/"
 };
-async function loadConfig() {
-  const configPath = path2.join(process.cwd(), "catalyst.config.jsonc");
-  try {
-    await fs.access(configPath);
-    const content = await fs.readFile(configPath, "utf-8");
-    const jsonContent = content.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
-    const config = JSON.parse(jsonContent);
-    return { ...DEFAULT_CONFIG, ...config };
-  } catch {
-    return null;
-  }
-}
-async function createConfig() {
-  const configPath = path2.join(process.cwd(), "catalyst.config.jsonc");
-  const configContent = `
-{
-    "theme": "blue", 
-    "preset": "MODERN",
-    "font": "Geist", 
-    "all-components": false, 
-    "install-tailwind": true, 
-    "configure-tailwind": true,
-    "configure-tailwind.config": true, 
-    "install-postcss": true, 
-    "configure-postcss": true, 
-    "css": "app/routes/styles/tailwind.css", 
-    "components": "app/" 
-}`;
-  await fs.writeFile(configPath, configContent, "utf-8");
-  console.log(source_default.green("\u2713 Created catalyst.config.jsonc"));
-}
 var API_URL = "https://catalyst-software.vercel.app/Catalyst/UI/code/verify/premium";
 var API_TIMEOUT = 5000;
 function hashKey(key) {
@@ -200695,6 +200665,7 @@ async function showPremiumMenu() {
     { name: `${source_default.bold("Configure Only")} ${source_default.gray("\u2192 Tailwind + PostCSS setup")}`, value: "configure-tailwind-postcss" },
     { name: `${source_default.bold("Configure with Ngin")} ${source_default.gray("\u2192 Tailwind + PostCSS + Ngin preset")}`, value: "configure-ngin" },
     { name: `${source_default.bold("Create Config")} ${source_default.gray("\u2192 Configure installation options with pre-configured config file")}`, value: "create-config" },
+    { name: `${source_default.bold("Configure Import Call")} ${source_default.gray("\u2192 Allows the use of #catalyst & #icons")}`, value: "import-call" },
     { name: `${source_default.red("\u2717 Exit")}`, value: "exit" }
   ];
   const notToggled = "\u25C7";
@@ -200725,6 +200696,7 @@ async function showFreeMenu() {
     { name: `${source_default.bold("Configure Only")} ${source_default.gray("\u2192 Tailwind + PostCSS setup")}`, value: "configure-tailwind-postcss" },
     { name: `${source_default.bold("Configure with Ngin")} ${source_default.gray("\u2192 Tailwind + PostCSS + Ngin preset")}`, value: "configure-ngin" },
     { name: `${source_default.bold("Create Config")} ${source_default.gray("\u2192 Configure installation options with pre-configured config file")}`, value: "create-config" },
+    { name: `${source_default.bold("Configure Import Call")} ${source_default.gray("\u2192 Allows the use of #catalyst & #icons")}`, value: "import-call" },
     { name: `${source_default.red("\u2717 Exit")}`, value: "exit" }
   ];
   const notToggled = "\u25C7";
@@ -200757,41 +200729,37 @@ async function getComponentsData(includePremium) {
     throw error;
   }
 }
-async function installSpecificComponent(componentName, isPremium, config) {
+async function installSpecificComponent(componentName, isPremium, targetPath, config) {
   const components = await getComponentsData(isPremium);
   const component = components.find((c) => c.value === componentName || c.name.toLowerCase() === componentName.toLowerCase());
-  if (!component) {
+  if (!component)
     throw new Error(`Component "${componentName}" not found`);
-  }
-  if (component.premium && !isPremium) {
-    throw new Error(`Component "${componentName}" is premium only. Use a valid access key to install.`);
-  }
-  await createComponentFile(component, config);
+  await createComponentFile(component, targetPath, config);
   const sourceFullPath = path2.join(SOURCE_COMPONENTS_FOLDER, component.path);
   const content = await fs.readFile(sourceFullPath, "utf-8");
   const dependencies = extractImportsFromFile(content, component.path);
   if (dependencies.size > 0) {
-    await installDependencies(Array.from(dependencies));
+    await installDependencies(Array.from(dependencies), targetPath);
   }
-  await ensureUtilsFile(config);
+  await ensureUtilsFile(targetPath, config);
 }
-async function createComponentFile(component, config) {
+async function createComponentFile(component, targetPath, config) {
   const componentsBase = config?.components || "app/";
   const sourcePath = component.path;
-  const targetPath = path2.join(process.cwd(), componentsBase, sourcePath.replace(/^\/?(app\/)?/, ""));
-  await fs.mkdir(path2.dirname(targetPath), { recursive: true });
+  const destPath = path2.join(targetPath, componentsBase, sourcePath.replace(/^\/?(app\/)?/, ""));
+  await fs.mkdir(path2.dirname(destPath), { recursive: true });
   const sourceFullPath = path2.join(SOURCE_COMPONENTS_FOLDER, sourcePath);
   const content = await fs.readFile(sourceFullPath, "utf-8");
-  await fs.writeFile(targetPath, content, "utf-8");
-  console.log(source_default.green(`\u2713 Created ${path2.relative(process.cwd(), targetPath)}`));
+  await fs.writeFile(destPath, content, "utf-8");
+  console.log(source_default.green(`\u2713 Created ${path2.relative(targetPath, destPath)}`));
 }
-async function installAllComponents(includePremium, config) {
+async function installAllComponents(includePremium, targetPath, config) {
   const components = await getComponentsData(includePremium);
   const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: `Installing ${components.length} components...` }).start();
   let installed = 0;
   for (const component of components) {
     try {
-      await createComponentFile(component, config);
+      await createComponentFile(component, targetPath, config);
       installed++;
       spinner.text = `Installing components... (${installed}/${components.length})`;
     } catch (error) {
@@ -200800,20 +200768,26 @@ async function installAllComponents(includePremium, config) {
     }
   }
   spinner.succeed(source_default.green(`Installed ${installed} components`));
-  await createIndexFiles();
+  await createIndexFiles(targetPath, config);
+  await configureProjectPaths(targetPath, config);
 }
-async function createIndexFiles() {
-  const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Creating index files..." }).start();
-  const componentsDir = path2.join(process.cwd(), "components", "catalyst-ui");
-  const folders = await fs.readdir(componentsDir, { withFileTypes: true });
-  for (const folder of folders) {
-    if (folder.isDirectory()) {
-      const folderPath = path2.join(componentsDir, folder.name);
-      await createIndexForFolder(folderPath);
-    }
-  }
-  await createMainIndex(componentsDir);
-  spinner.succeed(source_default.green("Created index files"));
+async function createIndexFiles(targetPath, config) {
+  const spinner = ora2("Creating index files...").start();
+  const componentsBase = config?.components || "app/";
+  const componentsDir = path2.join(targetPath, componentsBase, "components", "catalyst-ui");
+  try {
+    const folders = await fs.readdir(componentsDir, { withFileTypes: true });
+    for (const folder of folders) {
+      if (folder.isDirectory()) {
+        const folderPath = path2.join(componentsDir, folder.name);
+        await createIndexForFolder(folderPath);
+      }
+    }
+    await createMainIndex(componentsDir);
+    spinner.succeed(source_default.green("Created index files"));
+  } catch (e) {
+    spinner.fail(source_default.red("Index creation failed"));
+  }
 }
 async function createMainIndex(componentsDir) {
   try {
@@ -200863,28 +200837,24 @@ function generateIndexContent(files, basePath) {
 `) + `
 `;
 }
-async function installDependencies(deps) {
-  const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing dependencies..." }).start();
+async function installDependencies(deps, targetPath) {
+  const spinner = ora2("Installing dependencies...").start();
   try {
-    const packageManager = await detectPackageManager();
+    const packageManager = await detectPackageManager(targetPath);
     const installCmd = packageManager === "npm" ? "install" : "add";
-    execSync(`${packageManager} ${installCmd} ${deps.join(" ")}`, {
-      stdio: "inherit",
-      cwd: process.cwd()
-    });
+    execSync(`${packageManager} ${installCmd} ${deps.join(" ")}`, { stdio: "inherit", cwd: targetPath });
     spinner.succeed(source_default.green("Dependencies installed"));
   } catch (error) {
-    spinner.fail(source_default.red("Failed to install dependencies"));
-    throw error;
+    spinner.fail(source_default.red("Dependency installation failed"));
   }
 }
-async function detectPackageManager() {
+async function detectPackageManager(targetPath) {
   try {
-    await fs.access(path2.join(process.cwd(), "pnpm-lock.yaml"));
+    await fs.access(path2.join(targetPath, "pnpm-lock.yaml"));
     return "pnpm";
   } catch {}
   try {
-    await fs.access(path2.join(process.cwd(), "yarn.lock"));
+    await fs.access(path2.join(targetPath, "yarn.lock"));
     return "yarn";
   } catch {}
   return "npm";
@@ -200915,73 +200885,65 @@ async function installAllLibraries(includeAll) {
   const libs = includeAll ? requiredLibsAll : requiredLibs;
   await installDependencies(libs.split(" "));
 }
-async function ensureUtilsFile(config) {
+async function ensureUtilsFile(targetPath, config) {
   const componentsBase = config?.components || "app/";
-  const utilsPath = path2.join(process.cwd(), componentsBase, "components", "catalyst-ui", "utils", "utils.ts");
+  const utilsDest = path2.join(targetPath, componentsBase, "components", "catalyst-ui", "utils", "utils.ts");
   try {
-    await fs.access(utilsPath);
+    await fs.access(utilsDest);
     return;
   } catch {}
-  await fs.mkdir(path2.dirname(utilsPath), { recursive: true });
-  const sourceUtilsPath = path2.join(SOURCE_COMPONENTS_FOLDER, "utils", "utils.ts");
-  await fs.copyFile(sourceUtilsPath, utilsPath);
-  console.log(source_default.green(`\u2713 Created ${path2.relative(process.cwd(), utilsPath)}`));
-}
-async function configureTailwind(useNgin, config) {
-  const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Configuring Tailwind..." }).start();
-  if (config?.["configure-tailwind"]) {
-    const tailwindCssPath = config.css || "app/routes/styles/tailwind.css";
-    await copyFile(path2.join(SOURCE_DATA_FOLDER, "tailwind.css"), path2.join(process.cwd(), tailwindCssPath));
-  } else {
-    const tailwindCssPath = await getTailwindCssPath();
-    await copyFile(path2.join(SOURCE_DATA_FOLDER, "tailwind.css"), tailwindCssPath);
-  }
-  if (config?.["configure-tailwind.config"] !== false) {
-    const configType = config?.["configure-tailwind.config"] === "ngin" ? "ngin" : useNgin ? "ngin" : "basic";
-    const configFileName = configType === "ngin" ? "tailwind.config.ngin.js" : "tailwind.config.js";
-    await copyFile(path2.join(SOURCE_DATA_FOLDER, configFileName), path2.join(process.cwd(), "tailwind.config.js"));
-  }
-  if (config?.["configure-postcss"]) {
-    await copyFile(path2.join(SOURCE_DATA_FOLDER, "postcss.config.js"), path2.join(process.cwd(), "postcss.config.js"));
-  }
-  spinner.succeed(source_default.green("Tailwind configured"));
+  await fs.mkdir(path2.dirname(utilsDest), { recursive: true });
+  await fs.copyFile(path2.join(SOURCE_COMPONENTS_FOLDER, "utils", "utils.ts"), utilsDest);
+  console.log(source_default.green(`\u2713 Created ${path2.relative(targetPath, utilsDest)}`));
 }
-async function getTailwindCssPath() {
-  const { customPath } = await lib_default.prompt([
+async function getTailwindCssPath(targetPath) {
+  const { useDefault } = await lib_default.prompt([
     {
       type: "confirm",
-      name: "customPath",
+      name: "useDefault",
       message: "Use default path for tailwind.css? (app/routes/styles/tailwind.css)",
       default: true
     }
   ]);
-  if (customPath) {
-    return path2.join(process.cwd(), "app", "routes", "styles", "tailwind.css");
+  if (useDefault) {
+    return path2.join(targetPath, "app", "routes", "styles", "tailwind.css");
   }
-  const { path: userPath } = await lib_default.prompt([
+  const { userPath } = await lib_default.prompt([
     {
       type: "input",
-      name: "path",
+      name: "userPath",
       message: "Enter path for tailwind.css:",
       default: "app/routes/styles/tailwind.css"
     }
   ]);
-  return path2.join(process.cwd(), userPath);
+  return path2.join(targetPath, userPath);
 }
-async function copyFile(src, dest) {
+async function configureTailwind(useNgin, targetPath, config) {
+  const spinner = ora2("Configuring Tailwind...").start();
+  const cssPath = config?.css ? path2.join(targetPath, config.css) : await getTailwindCssPath(targetPath);
+  const configType = config?.["configure-tailwind.config"] === "ngin" || useNgin ? "ngin" : "basic";
+  const configFile = configType === "ngin" ? "tailwind.config.ngin.js" : "tailwind.config.js";
+  try {
+    await copyFile(path2.join(SOURCE_DATA_FOLDER, "tailwind.css"), cssPath, targetPath);
+    await copyFile(path2.join(SOURCE_DATA_FOLDER, configFile), path2.join(targetPath, "tailwind.config.js"), targetPath);
+    await copyFile(path2.join(SOURCE_DATA_FOLDER, "postcss.config.js"), path2.join(targetPath, "postcss.config.js"), targetPath);
+    spinner.succeed(source_default.green("Tailwind and PostCSS configured!"));
+  } catch (error) {
+    spinner.fail(source_default.red("Failed to configure Tailwind"));
+    throw error;
+  }
+}
+async function copyFile(src, dest, targetPath) {
   await fs.mkdir(path2.dirname(dest), { recursive: true });
   await fs.copyFile(src, dest);
-  console.log(source_default.green(`\u2713 Created ${path2.relative(process.cwd(), dest)}`));
+  console.log(source_default.green(`\u2713 Created ${path2.relative(targetPath, dest)}`));
 }
-async function fullInstall(includePremium, useNgin, config) {
-  await installAllComponents(includePremium, config);
-  if (config?.["install-tailwind"]) {
-    await installAllLibraries(includePremium);
-  }
-  if (config?.["configure-tailwind"] || config?.["configure-postcss"]) {
-    await configureTailwind(useNgin, config);
+async function fullInstall(includePremium, useNgin, targetPath, config) {
+  await installAllComponents(includePremium, targetPath, config);
+  if (config?.["configure-tailwind"]) {
+    await configureTailwind(useNgin, targetPath, config);
   }
-  await ensureUtilsFile(config);
+  await ensureUtilsFile(targetPath, config);
 }
 async function installComponentsAndLibs(includePremium) {
   await installAllComponents(includePremium);
@@ -201029,60 +200991,97 @@ async function selectComponentsInteractive(includePremium) {
   await createIndexFiles();
   spinner.succeed(source_default.green(`Installed ${selectedComponents.length} components`));
 }
-async function handleAction(action, isPremium) {
-  let spinner;
+async function configureProjectPaths(targetPath, config) {
+  const spinner = ora2("Configuring project paths...").start();
+  const base = config?.components || "app/";
+  const pathsToAdd = {
+    "#catalyst/*": `./${base}components/catalyst-ui/*`,
+    "#icons": "@catalystsoftware/icons"
+  };
+  try {
+    const pkgPath = path2.join(targetPath, "package.json");
+    const pkg = JSON.parse(await fs.readFile(pkgPath, "utf-8"));
+    pkg.imports = { ...pkg.imports, ...pathsToAdd };
+    await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2));
+    spinner.succeed(source_default.green("Aliases added to package.json"));
+  } catch (e) {
+    spinner.fail(source_default.red("Alias configuration failed"));
+  }
+}
+async function loadConfig(targetPath) {
+  const configPath = path2.join(targetPath, "config.catalyst");
+  try {
+    await fs.access(configPath);
+    const content = await fs.readFile(configPath, "utf-8");
+    const jsonContent = content.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+    const config = JSON.parse(jsonContent);
+    return { ...DEFAULT_CONFIG, ...config };
+  } catch {
+    return null;
+  }
+}
+async function createConfig(targetPath) {
+  const configPath = path2.join(targetPath, "config.catalyst");
+  const configContent = JSON.stringify(DEFAULT_CONFIG, null, 2);
+  await fs.writeFile(configPath, configContent, "utf-8");
+  console.log(source_default.green("\u2713 Created config.catalyst"));
+}
+async function handleAction(action, isPremium, targetPath, config) {
   try {
     switch (action) {
       case "create-config":
-        await createConfig();
+        await createConfig(targetPath);
         console.log(source_default.green(`
 \u2714 Config file created!`));
         break;
       case "full-premium-install":
-        await fullInstall(true, false);
+        await fullInstall(true, false, targetPath, config);
         console.log(source_default.green(`
 \u2605 Full premium installation complete!`));
         break;
       case "full-premium-ngin":
-        await fullInstall(true, true);
+        await fullInstall(true, true, targetPath, config);
         console.log(source_default.green(`
 \u2605 Full premium installation with Ngin complete!`));
         break;
       case "components-and-libs-premium":
-        await installComponentsAndLibs(true);
+        await installComponentsAndLibs(true, targetPath, config);
         console.log(source_default.green(`
 \u2605 All premium components and libraries installed!`));
         break;
       case "full-install":
-        await fullInstall(isPremium, false);
+        await fullInstall(isPremium, false, targetPath, config);
         console.log(source_default.green(`
 \u2714 Installation complete!`));
         break;
       case "full-install-ngin":
-        await fullInstall(isPremium, true);
+        await fullInstall(isPremium, true, targetPath, config);
         console.log(source_default.green(`
 \u2714 Installation with Ngin complete!`));
         break;
       case "components-and-libs":
-        await installComponentsAndLibs(isPremium);
+        await installComponentsAndLibs(isPremium, targetPath, config);
         console.log(source_default.green(`
 \u2714 Components and libraries installed!`));
         break;
       case "configure-tailwind-postcss":
-        await configureTailwind(false);
+        await configureTailwind(false, targetPath, config);
         console.log(source_default.green(`
 \u2714 Tailwind and PostCSS configured!`));
         break;
       case "configure-ngin":
-        await configureTailwind(true);
+        await configureTailwind(true, targetPath, config);
         console.log(source_default.green(`
 \u2714 Configured with Ngin preset!`));
         break;
       case "select-components":
-        await selectComponentsInteractive(false);
+        await selectComponentsInteractive(false, targetPath, config);
         break;
       case "select-all-components":
-        await selectComponentsInteractive(true);
+        await selectComponentsInteractive(true, targetPath, config);
+        break;
+      case "import-call":
+        await configureProjectPaths(targetPath, config);
         break;
       case "exit":
         console.log(source_default.cyan(`
@@ -201100,10 +201099,151 @@ async function handleAction(action, isPremium) {
 }
 async function main2() {
   const args = process.argv.slice(2);
+  const pathFlagIndex = args.indexOf("-p");
+  let customPath = process.cwd();
+  if (pathFlagIndex !== -1 && args[pathFlagIndex + 1]) {
+    customPath = path2.resolve(args[pathFlagIndex + 1]);
+    args.splice(pathFlagIndex, 2);
+  }
   const config = await loadConfig();
   const hasSecretAccess = await checkSecretAccess(args);
   const cleanArgs = args.filter((arg) => !arg.startsWith("-") && arg.length <= 50);
   const componentArg = cleanArgs.find((arg) => arg.length < 50 && !arg.includes("/"));
+  if (componentArg === "full-w-ngin") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("full-install-ngin", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "select-components") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("select-components", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "full-install") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("full-install", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "comps-and-libs") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("components-and-libs", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "create-config") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("create-config", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "configure-tailwind-postcss") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("configure-tailwind-postcss", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "configure-ngin") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("configure-ngin", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "create-config") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("create-config", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
+  if (componentArg === "import-call") {
+    console.log(source_default.blue(`
+\u2605 Installing...
+`));
+    const spinner = ora2({ frames: ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"], suffixText: "Installing component..." }).start();
+    try {
+      await handleAction("import-call", false, customPath, config);
+      spinner.succeed(source_default.green(`Successfully installed`));
+    } catch (error) {
+      spinner.fail(source_default.red(`Failed to install`));
+      console.error(error);
+      process.exit(1);
+    }
+    return;
+  }
   if (componentArg && componentArg.length < 20) {
     console.log(source_default.blue(`
 \u2605 Installing component: ${componentArg}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catalystsoftware/ui",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Catalyst UI Component Library CLI",
   "type": "module",
   "main": "dist/index.js",
@@ -39,6 +39,7 @@
     "ora": "^7.0.1"
   },
   "devDependencies": {
+    "@types/bun": "^1.3.6",
     "@types/inquirer": "^9.0.7",
     "@types/node": "^20.10.5",
     "esbuild": "^0.19.10",