@glass-ui-kit/cli 0.2.2 → 0.2.4

package/dist/index.js

@@ -45,6 +45,9 @@ async function getFramework() {
     const content = await readFile("package.json");
     const pkg = JSON.parse(content);
     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (deps["@remix-run/react"] || deps["@remix-run/dev"] || deps["@react-router/dev"] || deps["@react-router/node"]) {
+      return "remix";
+    }
     if (deps["next"]) return "next";
     if (deps["astro"]) return "astro";
     if (deps["vite"]) return "vite";
@@ -58,6 +61,12 @@ function getCssPath(framework) {
     next: ["app/globals.css", "src/app/globals.css", "styles/globals.css"],
     vite: ["src/index.css", "src/main.css", "src/style.css"],
     astro: ["src/styles/global.css", "src/global.css"],
+    remix: [
+      "app/app.css",
+      "app/tailwind.css",
+      "app/globals.css",
+      "app/styles/tailwind.css"
+    ],
     unknown: ["src/index.css", "styles.css"]
   };
   for (const p of paths[framework] || []) {
@@ -184,74 +193,88 @@ body {
   color: var(--foreground);
 }
 
-@layer components {
-  /* .glass -> La clase fundacional.
-    Usa las variables por defecto (--glass-bg, etc).
-  */
-  .glass,
-  .hover\\:glass:hover {
-    background: var(--glass-bg);
-    border: 1px solid var(--glass-border);
-    backdrop-filter: blur(var(--glass-blur));
-    box-shadow: var(--glass-shadow);
-  }
+@utility glass {
+  background-color: var(--glass-bg);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--glass-border);
+  backdrop-filter: blur(var(--glass-blur));
+  box-shadow: var(--glass-shadow);
+}
 
-  /* PRESETS DE INTENSIDAD
-    No reescriben propiedades CSS (background, border).
-    Solo re-asignan las variables locales.
-  */
-  .glass-strong,
-  .hover\\:glass-strong:hover {
-    --glass-bg: var(--glass-bg-strong);
-    --glass-border: var(--glass-border-strong);
-    --glass-blur: var(--glass-blur-strong);
-  }
+@utility glass-strong {
+  --glass-bg: var(--glass-bg-strong);
+  --glass-border: var(--glass-border-strong);
+  --glass-blur: var(--glass-blur-strong);
+}
 
-  .glass-soft,
-  .hover\\:glass-soft:hover {
-    --glass-bg: var(--glass-bg-soft);
-    --glass-border: var(--glass-border-soft);
-    --glass-blur: var(--glass-blur-soft);
-  }
+@utility glass-soft {
+  --glass-bg: var(--glass-bg-soft);
+  --glass-border: var(--glass-border-soft);
+  --glass-blur: var(--glass-blur-soft);
+}
 
-  /* SIZES */
-  .input-sm,
-  .btn-sm {
-    height: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    gap: 0.375rem;
-  }
+@utility input-sm {
+  height: 1.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  gap: 0.375rem;
+}
 
-  .input-md,
-  .btn-md {
-    height: 2rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    gap: 0.5rem;
-  }
+@utility btn-sm {
+  height: 1.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  gap: 0.375rem;
+}
 
-  .input-lg,
-  .btn-lg {
-    height: 2.5rem;
-    padding-left: 0.875rem;
-    padding-right: 0.875rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    gap: 0.625rem;
-  }
+@utility input-md {
+  height: 2rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  gap: 0.5rem;
+}
 
-  /* ICON BUTTON */
-  .btn-icon {
-    padding: 0;
-    aspect-ratio: 1 / 1;
-  }
+@utility btn-md {
+  height: 2rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  gap: 0.5rem;
+}
+
+@utility input-lg {
+  height: 2.5rem;
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  gap: 0.625rem;
+}
+
+@utility btn-lg {
+  height: 2.5rem;
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  gap: 0.625rem;
+}
+
+@utility btn-icon {
+  padding: 0;
+  aspect-ratio: 1 / 1;
 }
 `;
 
@@ -273,14 +296,23 @@ var init = new Command().name("init").description("Initialize configuration and
     const cwd = process.cwd();
     const configPath = "glass.config.json";
     const hasSrc = exists("src");
+    let baseDir = hasSrc ? "src" : "";
+    if (framework === "remix") {
+      baseDir = "app";
+    }
     let cssPath = getCssPath(framework);
     if (!cssPath || framework === "next") {
-      cssPath = hasSrc ? "src/app/globals.css" : "app/globals.css";
+      if (framework === "next") {
+        cssPath = hasSrc ? "src/app/globals.css" : "app/globals.css";
+      } else if (framework === "remix") {
+        cssPath = "app/app.css";
+      } else {
+        cssPath = hasSrc ? "src/index.css" : "index.css";
+      }
     }
-    const utilsPath = path2.join(
-      cwd,
-      hasSrc ? "src/lib/utils.ts" : "lib/utils.ts"
-    );
+    const utilsRelativePath = baseDir ? `${baseDir}/lib/utils.ts` : "lib/utils.ts";
+    const utilsPath = path2.join(cwd, utilsRelativePath);
+    const aliasPrefix = framework === "remix" ? "~" : "@";
     if (!exists(configPath)) {
       await writeFile(
         configPath,
@@ -290,8 +322,8 @@ var init = new Command().name("init").description("Initialize configuration and
             style: "default",
             css: cssPath,
             aliases: {
-              components: "@/components/ui",
-              utils: "@/lib/utils"
+              components: `${aliasPrefix}/components/ui`,
+              utils: `${aliasPrefix}/lib/utils`
             }
           },
           null,
@@ -304,11 +336,9 @@ var init = new Command().name("init").description("Initialize configuration and
     }
     if (!exists(utilsPath)) {
       await writeFile(utilsPath, UTILS_CN);
-      const displayPath = hasSrc ? "src/lib/utils.ts" : "lib/utils.ts";
-      console.log(chalk.green(`  Created ${displayPath}`));
+      console.log(chalk.green(`  Created ${utilsRelativePath}`));
     } else {
-      const displayPath = hasSrc ? "src/lib/utils.ts" : "lib/utils.ts";
-      console.log(chalk.gray(`  ${displayPath} already exists.`));
+      console.log(chalk.gray(`  ${utilsRelativePath} already exists.`));
     }
     let cssContent = "";
     try {
@@ -333,13 +363,18 @@ ${GLASS_BASE_STYLES}`;
       console.log(chalk.gray(`  Tokens already present in ${cssPath}`));
     }
     console.log(
-      chalk.cyan(`  Installing dependencies (clsx, tailwind-merge)...`)
+      chalk.cyan(
+        `  Installing dependencies (clsx, tailwind-merge, lucide-react)...`
+      )
     );
-    await installDependencies(["clsx", "tailwind-merge"], pm);
+    await installDependencies(["clsx", "tailwind-merge", "lucide-react"], pm);
+    const runCommand = pm === "bun" ? "bunx" : pm === "pnpm" ? "pnpm dlx" : "npx";
     console.log(chalk.bold.green("\nSetup complete."));
     console.log(`Try adding a component:
 `);
-    console.log(chalk.cyan(`  npx @glass-ui-kit/cli@latest add card`));
+    console.log(
+      chalk.cyan(`  ${runCommand} @glass-ui-kit/cli@latest add card`)
+    );
     console.log("");
   } catch (error) {
     console.error(chalk.red("\nInitialization failed:"));
@@ -504,8 +539,15 @@ var add = new Command2().name("add").description("Add a component to your projec
     }
     const hasSrc = exists("src");
     const targetDirAlias = config.aliases.components || "@/components/ui";
-    const relativeAliasPath = targetDirAlias.replace(/^@\//, "");
-    const targetDir = hasSrc ? `./src/${relativeAliasPath}` : `./${relativeAliasPath}`;
+    const relativeAliasPath = targetDirAlias.replace(/^[@~]\//, "");
+    let targetDir = "";
+    if (config.framework === "remix") {
+      targetDir = `./app/${relativeAliasPath}`;
+    } else if (hasSrc) {
+      targetDir = `./src/${relativeAliasPath}`;
+    } else {
+      targetDir = `./${relativeAliasPath}`;
+    }
     for (const file of item.files) {
       const fileName = path4.basename(file.path);
       const filePath = path4.join(targetDir, fileName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glass-ui-kit/cli",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "The official CLI for Glass UI. Add glassmorphism components to your React projects in seconds.",
   "keywords": [
     "glassmorphism",