@glass-ui-kit/cli 0.1.2 → 0.2.0

package/README.md

@@ -35,13 +35,6 @@ npx @glass-ui-kit/cli add card
 
 ```
 
-You can also run the command without any arguments to view a list of all available components:
-
-```bash
-npx @glass-ui-kit/cli add
-
-```
-
 ## Documentation
 
 Visit [https://ui-glass.vercel.app](https://ui-glass.vercel.app) to view the registry and documentation.
@@ -49,15 +42,3 @@ Visit [https://ui-glass.vercel.app](https://ui-glass.vercel.app) to view the reg
 ## License
 
 Licensed under the [MIT license](https://github.com/jntellez/glass-ui/blob/master/LICENSE).
-
----
-
-### Keywords
-
-components
-ui
-glassmorphism
-tailwind
-design-system
-react
-cli

package/dist/index.js

@@ -71,9 +71,7 @@ async function installDependencies(deps, pm) {
   return new Promise((resolve, reject) => {
     const child = spawn(pm, [installCmd, ...deps], {
       stdio: "inherit",
-      // Para ver los colores y logs del instalador
       shell: true
-      // CRÍTICO para Windows (ejecuta npm.cmd/pnpm.cmd correctamente)
     });
     child.on("close", (code) => {
       if (code !== 0) {
@@ -85,38 +83,75 @@ async function installDependencies(deps, pm) {
   });
 }
 
-// src/utils/templates.ts
-var UTILS_CN = `import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-`;
-var GLASS_TOKENS = `
+// src/templates/styles.ts
+var GLASS_BASE_STYLES = `
 @layer base {
   :root {
-    /* --- GLASS UI TOKENS (Light) --- */
-    --glass-surface: rgba(255, 255, 255, 0.4);
-    --glass-border: rgba(255, 255, 255, 0.6);
-    --glass-highlight: rgba(255, 255, 255, 0.5);
+    /* === Glass UI Tokens (Default) === */
+    --glass-bg: rgba(255, 255, 255, 0.4);
+    --glass-border: rgba(255, 255, 255, 0.5);
     --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
     --glass-blur: 12px;
     --glass-saturation: 110%;
+
+    /* === Intensity Variants === */
+    --glass-bg-strong: rgba(255, 255, 255, 0.75);
+    --glass-border-strong: rgba(255, 255, 255, 0.8);
+    --glass-blur-strong: 20px;
+
+    --glass-bg-soft: rgba(255, 255, 255, 0.2);
+    --glass-border-soft: rgba(255, 255, 255, 0.3);
+    --glass-blur-soft: 8px;
   }
 
   .dark {
-    /* --- GLASS UI TOKENS (Dark) --- */
-    --glass-surface: rgba(0, 0, 0, 0.3);
+    /* === Glass UI Tokens (Dark) === */
+    --glass-bg: rgba(15, 23, 42, 0.6);
     --glass-border: rgba(255, 255, 255, 0.08);
-    --glass-highlight: rgba(255, 255, 255, 0.03);
-    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
-    --glass-blur: 12px;
-    --glass-saturation: 100%;
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+
+    --glass-bg-strong: rgba(15, 23, 42, 0.85);
+    --glass-border-strong: rgba(255, 255, 255, 0.15);
+    
+    --glass-bg-soft: rgba(15, 23, 42, 0.3);
+    --glass-border-soft: rgba(255, 255, 255, 0.05);
+  }
+}
+
+@layer components {
+  /* La clase base obligatoria */
+  .glass {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    box-shadow: var(--glass-shadow);
+  }
+
+  /* Variantes sem\xE1nticas (solo reasignan variables) */
+  .glass-strong {
+    --glass-bg: var(--glass-bg-strong);
+    --glass-border: var(--glass-border-strong);
+    --glass-blur: var(--glass-blur-strong);
+  }
+
+  .glass-soft {
+    --glass-bg: var(--glass-bg-soft);
+    --glass-border: var(--glass-border-soft);
+    --glass-blur: var(--glass-blur-soft);
   }
 }
 `;
 
+// src/templates/utils.ts
+var UTILS_CN = `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+
 // src/commands/init.ts
 var init = new Command().name("init").description("Initialize configuration and dependencies").option("-y, --yes", "Skip confirmation prompt", false).action(async (opts) => {
   try {
@@ -163,8 +198,8 @@ var init = new Command().name("init").description("Initialize configuration and
       }
     } catch (e) {
     }
-    if (!cssContent.includes("--glass-surface")) {
-      const newCssContent = `${GLASS_TOKENS}
+    if (!cssContent.includes("--glass-bg")) {
+      const newCssContent = `${GLASS_BASE_STYLES}
 ${cssContent}`;
       await writeFile(cssPath, newCssContent);
       console.log(chalk.green(`  Updated ${cssPath} with glass tokens`));
@@ -302,6 +337,27 @@ function getItem(registry, name) {
   return registry.find((item) => item.name === name);
 }
 
+// src/utils/transformers.ts
+function transformImports(content, config) {
+  let transformed = content;
+  transformed = transformed.replace(
+    /from\s+["'](\.\.\/)+lib\/utils["']/g,
+    `from "${config.aliases.utils}"`
+  );
+  transformed = transformed.replace(
+    /from\s+["']~glass\/lib\/utils["']/g,
+    `from "${config.aliases.utils}"`
+  );
+  transformed = transformed.replace(
+    /from\s+["'](\.\.\/)+ui\/([\w-]+)["']/g,
+    (match, prefix, componentName) => {
+      const cleanName = componentName.replace(/\.tsx?$/, "");
+      return `from "${config.aliases.components}/${cleanName}"`;
+    }
+  );
+  return transformed;
+}
+
 // src/commands/add.ts
 var add = new Command2().name("add").description("Add a component to your project").argument("<component>", "The component to add").action(async (componentName) => {
   try {
@@ -317,11 +373,7 @@ var add = new Command2().name("add").description("Add a component to your projec
     const registry = await fetchRegistry();
     const item = getItem(registry, componentName);
     if (!item) {
-      console.error(
-        chalk2.red(`Component '${componentName}' not found in registry.`)
-      );
-      console.log(chalk2.gray("Available components:"));
-      console.log(chalk2.gray(`  ${registry.map((i) => i.name).join(", ")}`));
+      console.error(chalk2.red(`Component '${componentName}' not found.`));
       process.exit(1);
     }
     const targetDirAlias = config.aliases.components || "@/components/ui";
@@ -332,7 +384,8 @@ var add = new Command2().name("add").description("Add a component to your projec
       if (!file.content) {
         continue;
       }
-      await writeFile(filePath, file.content);
+      const transformedContent = transformImports(file.content, config);
+      await writeFile(filePath, transformedContent);
       console.log(chalk2.green(`  Created ${filePath}`));
     }
     if (item.dependencies?.length) {
@@ -345,8 +398,6 @@ Done.`));
     console.error(chalk2.red("\nOperation failed:"));
     if (error instanceof Error) {
       console.error(chalk2.gray(`  ${error.message}`));
-    } else {
-      console.error(chalk2.gray("  An unknown error occurred."));
     }
     process.exit(1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glass-ui-kit/cli",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "The official CLI for Glass UI. Add glassmorphism components to your React projects in seconds.",
   "keywords": [
     "glassmorphism",
@@ -32,6 +32,12 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --clean",
+    "dev": "bun run ./src/index.ts",
+    "lint": "eslint src",
+    "prepublishOnly": "pnpm run build"
+  },
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^11.1.0",
@@ -39,19 +45,14 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@glass-ui-kit/tsconfig": "workspace:*",
+    "@glass-ui-kit/schema": "workspace:*",
     "@types/node": "^20.11.0",
     "bun-types": "latest",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.3",
-    "@glass-ui-kit/tsconfig": "0.0.1",
-    "@glass-ui-kit/schema": "0.0.1"
+    "typescript": "^5.3.3"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --clean",
-    "dev": "bun run ./src/index.ts",
-    "lint": "eslint src"
   }
-}
+}