@glass-ui-kit/cli 0.1.3 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Juan Tellez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -42,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,187 @@ 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);
+    /* === TEXT TOKENS (Light) === */
+    --foreground: #18181b;
+    --muted-foreground: #3f3f46;
+
+    /* === BASE PRIMITIVES (Default) === */
+    --glass-bg: rgba(255, 255, 255, 0.35);
     --glass-border: rgba(255, 255, 255, 0.6);
-    --glass-highlight: rgba(255, 255, 255, 0.5);
-    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
-    --glass-blur: 12px;
-    --glass-saturation: 110%;
+    --glass-shadow: var(--glass-shadow-sm);
+    --glass-blur: 6px;
+
+    /* === SHADOW SIZES === */
+    --glass-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+    --glass-shadow-md: 0 4px 30px 0 rgba(0, 0, 0, 0.1);
+    --glass-shadow-lg: 0 8px 40px 0 rgba(0, 0, 0, 0.2);
+
+    /* === BORDER RADIUS === */
+    --glass-radius-sm: 0.375rem;
+    --glass-radius-md: 0.75rem;
+    --glass-radius-lg: 1rem;
+    --glass-radius-xl: 1.5rem;
+
+    /* === SEMANTIC VARIANTS === */
+    --glass-bg-strong: rgba(255, 255, 255, 0.5);
+    --glass-border-strong: rgba(255, 255, 255, 0.8);
+    --glass-blur-strong: 10px;
+
+    --glass-bg-soft: rgba(255, 255, 255, 0.2);
+    --glass-border-soft: rgba(255, 255, 255, 0.4);
+    --glass-blur-soft: 2px;
   }
 
   .dark {
-    /* --- GLASS UI TOKENS (Dark) --- */
-    --glass-surface: rgba(0, 0, 0, 0.3);
-    --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%;
+    /* === TEXT TOKENS (Dark) === */
+    --foreground: #fafafa;
+    --muted-foreground: #d4d4d8;
+
+    /* === DARK PRIMITIVES === */
+    --glass-bg: rgba(255, 255, 255, 0.08);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-shadow: var(--glass-shadow-sm);
+
+    /* === DARK SHADOW SIZES === */
+    --glass-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    --glass-shadow-md: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
+    --glass-shadow-lg: 0 8px 40px 0 rgba(0, 0, 0, 0.35);
+
+    /* === DARK VARIANTS === */
+    --glass-bg-strong: rgba(255, 255, 255, 0.15);
+    --glass-border-strong: rgba(255, 255, 255, 0.2);
+
+    --glass-bg-soft: rgba(255, 255, 255, 0.03);
+    --glass-border-soft: rgba(255, 255, 255, 0.06);
+  }
+}
+
+@theme {
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-glass-bg: var(--glass-bg);
+  --color-glass-border: var(--glass-border);
+  --shadow-glass: var(--glass-shadow);
+  --shadow-glass-sm: var(--glass-shadow-sm);
+  --shadow-glass-md: var(--glass-shadow-md);
+  --shadow-glass-lg: var(--glass-shadow-lg);
+  --backdrop-blur-glass: var(--glass-blur);
+  --radius-glass-sm: var(--glass-radius-sm);
+  --radius-glass-md: var(--glass-radius-md);
+  --radius-glass-lg: var(--glass-radius-lg);
+  --radius-glass-xl: var(--glass-radius-xl);
+}
+
+/* --- Global Utilities Injected by Glass UI --- */
+
+/* Hide native reveal icons in password inputs */
+input[type="password"]::-ms-reveal,
+input[type="password"]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* Provisional gradient background to highlight Glassmorphism */
+body {
+  /* Pastel gradient for light mode */
+  background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
+  background-attachment: fixed;
+  color: var(--foreground);
+  min-height: 100vh;
+}
+
+.dark body {
+  /* Deep gradient for dark mode */
+  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+  background-attachment: fixed;
+  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);
+  }
+
+  /* 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);
+  }
+
+  .glass-soft,
+  .hover\\:glass-soft:hover {
+    --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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  /* ICON BUTTON */
+  .btn-icon {
+    padding: 0;
+    aspect-ratio: 1 / 1;
   }
 }
 `;
 
+// 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,9 +310,10 @@ var init = new Command().name("init").description("Initialize configuration and
       }
     } catch (e) {
     }
-    if (!cssContent.includes("--glass-surface")) {
-      const newCssContent = `${GLASS_TOKENS}
-${cssContent}`;
+    if (!cssContent.includes("--glass-bg")) {
+      const newCssContent = `${cssContent.trimEnd()}
+
+${GLASS_BASE_STYLES}`;
       await writeFile(cssPath, newCssContent);
       console.log(chalk.green(`  Updated ${cssPath} with glass tokens`));
     } else {
@@ -302,6 +450,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 +486,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 +497,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 +511,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.3",
+  "version": "0.2.1",
   "description": "The official CLI for Glass UI. Add glassmorphism components to your React projects in seconds.",
   "keywords": [
     "glassmorphism",
@@ -43,15 +43,16 @@
     "bun-types": "latest",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "@glass-ui-kit/schema": "0.0.1",
-    "@glass-ui-kit/tsconfig": "0.0.1"
+    "@glass-ui-kit/tsconfig": "0.0.1",
+    "@glass-ui-kit/schema": "0.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --clean",
-    "dev": "bun run ./src/index.ts",
+    "sync": "node scripts/sync-styles.mjs",
+    "build": "pnpm run sync && tsup src/index.ts --format esm --clean",
+    "dev": "pnpm run sync && bun run ./src/index.ts",
     "lint": "eslint src"
   }
 }