react-native-varia 0.4.4 → 0.4.6

package/bin/cli.js

@@ -1,394 +1,462 @@
 #!/usr/bin/env node
 
-const { program } = require("commander");
-const inquirer = require("inquirer");
-const path = require("path");
-const fs = require("fs-extra");
+const {program} = require('commander')
+const inquirer = require('inquirer')
+const path = require('path')
+const fs = require('fs-extra')
 
 const COMPONENT_DEPENDENCIES = {
-  Button: ["Spinner", "IconWrapper"],
-  Field: ["Text"],
-  Link: ["Text"],
-  Modal: ["Text"],
-  ReText: ["Text"],
-  Select: ["Text"],
-};
+  Button: ['Spinner', 'IconWrapper'],
+  Field: ['Text'],
+  Link: ['Text'],
+  Modal: ['Text'],
+  ReText: ['Text'],
+  Select: ['Text'],
+}
 
 const ICON_DEPENDENCIES = {
-  NumberInput: ["Plus", "Minus"],
-};
+  NumberInput: ['Plus', 'Minus'],
+}
 
 const CONTEXT_DEPENDENCIES = {
-  Field: true
-};
-
-function copyContextComponentIfNeeded(component, destComponents, overwrite = true) {
-  if (!CONTEXT_DEPENDENCIES[component]) return;
+  Field: true,
+}
 
-  const contextSrc = path.join(COMPONENTS_DIR, "context", `${component}.tsx`);
-  const contextDest = path.join(process.cwd(), destComponents, "context", `${component}.tsx`);
-  copyFile(contextSrc, contextDest, `Context de "${component}"`, overwrite);
+function copyContextComponentIfNeeded(
+  component,
+  destComponents,
+  overwrite = true,
+) {
+  if (!CONTEXT_DEPENDENCIES[component]) return
+
+  const contextSrc = path.join(COMPONENTS_DIR, 'context', `${component}.tsx`)
+  const contextDest = path.join(
+    process.cwd(),
+    destComponents,
+    'context',
+    `${component}.tsx`,
+  )
+  copyFile(contextSrc, contextDest, `Context of "${component}"`, overwrite)
 }
 
 function resolveDependencies(component, seen = new Set()) {
-  if (seen.has(component)) return [];
-  seen.add(component);
+  if (seen.has(component)) return []
+  seen.add(component)
 
-  const deps = COMPONENT_DEPENDENCIES[component] || [];
-  let allDeps = [...deps];
+  const deps = COMPONENT_DEPENDENCIES[component] || []
+  let allDeps = [...deps]
 
   for (const dep of deps) {
-    allDeps = [...allDeps, ...resolveDependencies(dep, seen)];
+    allDeps = [...allDeps, ...resolveDependencies(dep, seen)]
   }
 
-  return [...new Set(allDeps)];
+  return [...new Set(allDeps)]
 }
 
-const COMPONENTS_DIR = path.join(__dirname, "../lib/components");
-const THEME_DIR = path.join(__dirname, "../lib/theme");
+const COMPONENTS_DIR = path.join(__dirname, '../lib/components')
+const THEME_DIR = path.join(__dirname, '../lib/theme')
 
 function getAvailableComponents() {
-  if (!fs.existsSync(COMPONENTS_DIR)) return [];
-  return fs.readdirSync(COMPONENTS_DIR).map((name) => path.parse(name).name);
+  if (!fs.existsSync(COMPONENTS_DIR)) return []
+  return fs.readdirSync(COMPONENTS_DIR).map(name => path.parse(name).name)
 }
 
 function copyFile(srcPath, destPath, label, overwrite = true) {
   if (!fs.existsSync(srcPath)) {
-    console.warn(`⚠️ ${label} no encontrado: ${srcPath}`);
-    return false;
+    console.warn(`⚠️ ${label} not found: ${srcPath}`)
+    return false
   }
   try {
-    fs.ensureDirSync(path.dirname(destPath));
+    fs.ensureDirSync(path.dirname(destPath))
 
     if (!overwrite && fs.existsSync(destPath)) {
-      console.log(`⏭️  Saltando ${label}, ya existe en ${destPath}`);
-      return false;
+      console.log(`⏭️ Skipping ${label}, already exists in ${destPath}`)
+      return false
     }
 
-    fs.copySync(srcPath, destPath, { overwrite: true });
-    console.log(`✅ ${label} copiado a: ${destPath}`);
-    return true;
+    fs.copySync(srcPath, destPath, {overwrite: true})
+    console.log(`✅ ${label} copied to: ${destPath}`)
+    return true
   } catch (err) {
-    console.error(`❌ No se pudo copiar ${label}: ${err.message}`);
-    return false;
+    console.error(`❌ Couldn't copy ${label}: ${err.message}`)
+    return false
   }
 }
 
-function copyComponentAndRecipe(component, destComponents, destTheme, overwrite = true) {
-  const componentSrc = path.join(COMPONENTS_DIR, `${component}.tsx`);
-  const componentDest = path.join(process.cwd(), destComponents, `${component}.tsx`);
-  copyFile(componentSrc, componentDest, `Componente "${component}"`, overwrite);
-
-  const recipeSrc = path.join(THEME_DIR, `${component}.recipe.tsx`);
-  const recipeDest = path.join(process.cwd(), destTheme, `${component}.recipe.tsx`);
-  copyFile(recipeSrc, recipeDest, `Recipe de "${component}"`, overwrite);
+function copyComponentAndRecipe(
+  component,
+  destComponents,
+  destTheme,
+  overwrite = true,
+) {
+  const componentSrc = path.join(COMPONENTS_DIR, `${component}.tsx`)
+  const componentDest = path.join(
+    process.cwd(),
+    destComponents,
+    `${component}.tsx`,
+  )
+  copyFile(componentSrc, componentDest, `Componente "${component}"`, overwrite)
+
+  const recipeSrc = path.join(THEME_DIR, `${component}.recipe.tsx`)
+  const recipeDest = path.join(
+    process.cwd(),
+    destTheme,
+    `${component}.recipe.tsx`,
+  )
+  copyFile(recipeSrc, recipeDest, `Recipe of "${component}"`, overwrite)
 }
 
 async function confirmOverwrite(existingComponents) {
-  const { overwrite } = await inquirer.prompt([
+  const {overwrite} = await inquirer.prompt([
     {
-      type: "confirm",
-      name: "overwrite",
-      message: `Los siguientes componentes ya existen: ${existingComponents.join(
-        ", "
-      )}\n¿Quieres sobrescribirlos?`,
+      type: 'confirm',
+      name: 'overwrite',
+      message: `The following components already exist: ${existingComponents.join(
+        ', ',
+      )}\nDo you want to overwrite them?`,
       default: false,
     },
-  ]);
-  return overwrite;
+  ])
+  return overwrite
 }
 
 program
-  .name("varia")
-  .description("CLI para instalar componentes de react-native-varia")
-  .version("1.0.0");
+  .name('varia')
+  .description('CLI for installing components from react-native-varia')
+  .version('1.0.0')
 
 program
-  .command("setup")
-  .description("Copia la carpeta varia y patterns al proyecto (src/style/varia y src/patterns)")
+  .command('setup')
+  .description(
+    'Copy the varia and patterns folders to the project (src/style/varia y src/patterns)',
+  )
   .action(() => {
-    const variaSrc = path.join(__dirname, "../lib/varia");
-    const variaDest = path.join(process.cwd(), "src/style/varia");
+    const variaSrc = path.join(__dirname, '../lib/varia')
+    const variaDest = path.join(process.cwd(), 'src/style/varia')
 
-    const patternsSrc = path.join(__dirname, "../lib/patterns");
-    const patternsDest = path.join(process.cwd(), "src/patterns");
+    const patternsSrc = path.join(__dirname, '../lib/patterns')
+    const patternsDest = path.join(process.cwd(), 'src/patterns')
 
     try {
-      fs.ensureDirSync(path.dirname(variaDest));
-      fs.copySync(variaSrc, variaDest, { overwrite: true });
-      console.log(`✅ Carpeta "varia" copiada a ${variaDest}`);
+      fs.ensureDirSync(path.dirname(variaDest))
+      fs.copySync(variaSrc, variaDest, {overwrite: true})
+      console.log(`✅ Directory "varia" copied to ${variaDest}`)
 
-      fs.ensureDirSync(path.dirname(patternsDest));
-      fs.copySync(patternsSrc, patternsDest, { overwrite: true });
-      console.log(`✅ Carpeta "patterns" copiada a ${patternsDest}`);
+      fs.ensureDirSync(path.dirname(patternsDest))
+      fs.copySync(patternsSrc, patternsDest, {overwrite: true})
+      console.log(`✅ Directory "patterns" copied to ${patternsDest}`)
     } catch (err) {
-      console.error(`❌ Error durante el setup: ${err.message}`);
+      console.error(`❌ Error during setup: ${err.message}`)
     }
-  });
-
+  })
 
 program
-  .command("add-patterns")
-  .description("Copia la carpeta lib/patterns a src/patterns")
+  .command('add-patterns')
+  .description('Copy the lib/patterns folder to src/patterns')
   .action(() => {
-    const sourceDir = path.join(__dirname, "../lib/patterns");
-    const destDir = path.join(process.cwd(), "src/patterns");
+    const sourceDir = path.join(__dirname, '../lib/patterns')
+    const destDir = path.join(process.cwd(), 'src/patterns')
 
     try {
-      fs.ensureDirSync(destDir);
-      fs.copySync(sourceDir, destDir, { overwrite: true });
-      console.log("✅ Carpeta patterns copiada a src/patterns");
+      fs.ensureDirSync(destDir)
+      fs.copySync(sourceDir, destDir, {overwrite: true})
+      console.log('✅ Patterns folder copied to src/patterns')
     } catch (err) {
-      console.error(`❌ Error al copiar patterns: ${err.message}`);
+      console.error(`❌ Error copying patterns: ${err.message}`)
+    }
+  })
+
+program
+  .command('update')
+  .description('Update all previously copied components in your project')
+  .option(
+    '-d, --dest <path>',
+    'Destination path for components',
+    'src/components',
+  )
+  .option('-t, --theme <path>', 'Destination path for recipes', 'src/theme')
+  .option('-i, --icons <path>', 'Destination path for icons', 'src/icons')
+  .action(async options => {
+    const destComponentsDir = path.join(process.cwd(), options.dest)
+
+    if (!fs.existsSync(destComponentsDir)) {
+      console.log(`❌ Destination folder does not exist: ${destComponentsDir}`)
+      return
+    }
+
+    const existingFiles = fs.readdirSync(destComponentsDir)
+    const existingComponents = existingFiles
+      .filter(f => f.endsWith('.tsx'))
+      .map(f => path.parse(f).name)
+      .filter(name => name !== 'IconWrapper' && name !== 'context') // excluimos context y wrapper
+
+    if (existingComponents.length === 0) {
+      console.log('No components found to update.')
+      return
     }
-  });
-
-// program
-//   .command("add <components...>")
-//   .description("Copia uno o más componentes y sus recipes desde la librería a tu proyecto")
-//   .option("-d, --dest <path>", "Ruta de destino de componentes", "src/components")
-//   .option("-t, --theme <path>", "Ruta de destino de recipes", "src/theme")
-//   .action(async (components, options) => {
-//     const available = getAvailableComponents();
-//     const componentsCapitalized = components.map(
-//       (c) => c.charAt(0).toUpperCase() + c.slice(1)
-//     );
-
-//     // 🔹 Obtener dependencias totales
-//     const allComponents = new Set();
-//     const componentToDeps = {}; // para saber qué depende de qué
-//     for (const c of componentsCapitalized) {
-//       const deps = resolveDependencies(c);
-//       componentToDeps[c] = deps;
-//       allComponents.add(c);
-//       deps.forEach((d) => allComponents.add(d));
-//     }
-
-//     const allComponentsArray = Array.from(allComponents);
-
-//     // 🔹 Validar existencia
-//     const notFound = allComponentsArray.filter((c) => !available.includes(c));
-//     if (notFound.length > 0) {
-//       console.error(`❌ Los siguientes componentes no existen: ${notFound.join(", ")}`);
-//       console.log("\n📦 Componentes disponibles:");
-//       available.forEach((name) => console.log(`  - ${name}`));
-//       process.exit(1);
-//     }
-
-//     // 🔹 Preparar instalación
-//     for (const mainComponent of componentsCapitalized) {
-//       const componentPath = path.join(process.cwd(), options.dest, `${mainComponent}.tsx`);
-//       let overwriteMain = true;
-
-//       // Preguntar solo si el componente principal existe
-//       if (fs.existsSync(componentPath)) {
-//         const { overwrite } = await inquirer.prompt([
-//           {
-//             type: "confirm",
-//             name: "overwrite",
-//             message: `El componente "${mainComponent}" ya existe. ¿Deseas sobrescribirlo?`,
-//             default: false,
-//           },
-//         ]);
-
-//         overwriteMain = overwrite;
-//         if (!overwriteMain) {
-//           console.log(`⏭️  Componente "${mainComponent}" no sobrescrito.`);
-//         }
-//       }
-
-//       // 🔹 Copiar componente principal
-//       copyComponentAndRecipe(mainComponent, options.dest, options.theme, overwriteMain);
-
-//       // 🔹 Copiar dependencias (sin sobrescribir si existen)
-//       const deps = componentToDeps[mainComponent] || [];
-//       for (const dep of deps) {
-//         const depPath = path.join(process.cwd(), options.dest, `${dep}.tsx`);
-//         const exists = fs.existsSync(depPath);
-//         if (exists) {
-//           console.log(`⏭️  Dependencia "${dep}" ya existe. No se sobrescribe.`);
-//           continue;
-//         }
-//         copyComponentAndRecipe(dep, options.dest, options.theme, true);
-//       }
-//     }
-//   });
+
+    const {confirmUpdate} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'confirmUpdate',
+        message: `Found the following components: ${existingComponents.join(
+          ', ',
+        )}\nDo you want to update them?`,
+        default: false,
+      },
+    ])
+
+    if (!confirmUpdate) {
+      console.log('⏭️ Update cancelled.')
+      return
+    }
+
+    for (const component of existingComponents) {
+      copyComponentAndRecipe(component, options.dest, options.theme, true)
+      copyContextComponentIfNeeded(component, options.dest, true)
+
+      const iconDeps = ICON_DEPENDENCIES[component] || []
+      if (iconDeps.length > 0) {
+        for (const iconName of iconDeps) {
+          copyIconTemplate(iconName, options.icons)
+        }
+        ensureIconWrapper(options.dest, options.theme)
+      }
+    }
+
+    console.log('✅ Components updated successfully.')
+  })
 
 program
-  .command("add <components...>")
-  .description("Copia uno o más componentes y sus recipes desde la librería a tu proyecto")
-  .option("-d, --dest <path>", "Ruta de destino de componentes", "src/components")
-  .option("-t, --theme <path>", "Ruta de destino de recipes", "src/theme")
-  .option("-i, --icons <path>", "Ruta de destino de íconos", "src/icons")
+  .command('add <components...>')
+  .description(
+    'Copies one or more components and their recipes from the library to your project',
+  )
+  .option(
+    '-d, --dest <path>',
+    'Destination path for components',
+    'src/components',
+  )
+  .option('-t, --theme <path>', 'Destination path for recipes', 'src/theme')
+  .option('-i, --icons <path>', 'Destination path for icons', 'src/icons')
   .action(async (components, options) => {
-    const available = getAvailableComponents();
+    const available = getAvailableComponents()
     const componentsCapitalized = components.map(
-      (c) => c.charAt(0).toUpperCase() + c.slice(1)
-    );
+      c => c.charAt(0).toUpperCase() + c.slice(1),
+    )
 
-    const allComponents = new Set();
-    const componentToDeps = {};
+    const allComponents = new Set()
+    const componentToDeps = {}
     for (const c of componentsCapitalized) {
-      const deps = resolveDependencies(c);
-      componentToDeps[c] = deps;
-      allComponents.add(c);
-      deps.forEach((d) => allComponents.add(d));
+      const deps = resolveDependencies(c)
+      componentToDeps[c] = deps
+      allComponents.add(c)
+      deps.forEach(d => allComponents.add(d))
     }
 
-    const allComponentsArray = Array.from(allComponents);
+    const allComponentsArray = Array.from(allComponents)
 
-    const notFound = allComponentsArray.filter((c) => !available.includes(c));
+    const notFound = allComponentsArray.filter(c => !available.includes(c))
     if (notFound.length > 0) {
-      console.error(`❌ Los siguientes componentes no existen: ${notFound.join(", ")}`);
-      console.log("\n📦 Componentes disponibles:");
-      available.forEach((name) => console.log(`  - ${name}`));
-      process.exit(1);
+      console.error(
+        `❌ The following components do not exist: ${notFound.join(', ')}`,
+      )
+      console.log('\n📦 Available components:')
+      available.forEach(name => console.log(`  - ${name}`))
+      process.exit(1)
     }
 
-    function copyContextComponentIfNeeded(component, destComponents, overwrite = true) {
-      if (!CONTEXT_DEPENDENCIES[component]) return;
-
-      const contextSrc = path.join(COMPONENTS_DIR, "context", `${component}.tsx`);
-      const contextDest = path.join(process.cwd(), destComponents, "context", `${component}.tsx`);
-      copyFile(contextSrc, contextDest, `Context de "${component}"`, overwrite);
+    function copyContextComponentIfNeeded(
+      component,
+      destComponents,
+      overwrite = true,
+    ) {
+      if (!CONTEXT_DEPENDENCIES[component]) return
+
+      const contextSrc = path.join(
+        COMPONENTS_DIR,
+        'context',
+        `${component}.tsx`,
+      )
+      const contextDest = path.join(
+        process.cwd(),
+        destComponents,
+        'context',
+        `${component}.tsx`,
+      )
+      copyFile(contextSrc, contextDest, `Context for "${component}"`, overwrite)
     }
 
     for (const mainComponent of componentsCapitalized) {
-      const componentPath = path.join(process.cwd(), options.dest, `${mainComponent}.tsx`);
-      let overwriteMain = true;
+      const componentPath = path.join(
+        process.cwd(),
+        options.dest,
+        `${mainComponent}.tsx`,
+      )
+      let overwriteMain = true
 
       if (fs.existsSync(componentPath)) {
-        const { overwrite } = await inquirer.prompt([
+        const {overwrite} = await inquirer.prompt([
           {
-            type: "confirm",
-            name: "overwrite",
-            message: `El componente "${mainComponent}" ya existe. ¿Deseas sobrescribirlo?`,
+            type: 'confirm',
+            name: 'overwrite',
+            message: `Component "${mainComponent}" exists. Do you want to overwrite it?`,
             default: false,
           },
-        ]);
+        ])
 
-        overwriteMain = overwrite;
+        overwriteMain = overwrite
         if (!overwriteMain) {
-          console.log(`⏭️  Componente "${mainComponent}" no sobrescrito.`);
+          console.log(`⏭️  Component "${mainComponent}" not overwritten.`)
         }
       }
 
-      copyComponentAndRecipe(mainComponent, options.dest, options.theme, overwriteMain);
+      copyComponentAndRecipe(
+        mainComponent,
+        options.dest,
+        options.theme,
+        overwriteMain,
+      )
 
-      copyContextComponentIfNeeded(mainComponent, options.dest, overwriteMain);
+      copyContextComponentIfNeeded(mainComponent, options.dest, overwriteMain)
 
-      const deps = componentToDeps[mainComponent] || [];
+      const deps = componentToDeps[mainComponent] || []
       for (const dep of deps) {
-        const depPath = path.join(process.cwd(), options.dest, `${dep}.tsx`);
-        const exists = fs.existsSync(depPath);
+        const depPath = path.join(process.cwd(), options.dest, `${dep}.tsx`)
+        const exists = fs.existsSync(depPath)
         if (exists) {
-          console.log(`⏭️  Dependencia "${dep}" ya existe. No se sobrescribe.`);
-          continue;
+          console.log(
+            `⏭️  Dependency "${dep}" already exists. It does not overwrite.`,
+          )
+          continue
         }
-        copyComponentAndRecipe(dep, options.dest, options.theme, true);
+        copyComponentAndRecipe(dep, options.dest, options.theme, true)
       }
 
-      const iconDeps = ICON_DEPENDENCIES[mainComponent] || [];
+      const iconDeps = ICON_DEPENDENCIES[mainComponent] || []
       if (iconDeps.length > 0) {
-        console.log(`🎨 Añadiendo íconos requeridos por "${mainComponent}": ${iconDeps.join(", ")}`);
+        console.log(
+          `🎨 Adding icons required by "${mainComponent}": ${iconDeps.join(
+            ', ',
+          )}`,
+        )
 
         for (const iconName of iconDeps) {
-          const destIconPath = path.join(process.cwd(), options.icons, `${iconName}.tsx`);
+          const destIconPath = path.join(
+            process.cwd(),
+            options.icons,
+            `${iconName}.tsx`,
+          )
           if (fs.existsSync(destIconPath)) {
-            console.log(`⏭️  Icono "${iconName}" ya existe. No se sobrescribe.`);
-            continue;
+            console.log(
+              `⏭️  Icon "${iconName}" already exists. It does not overwrite.`,
+            )
+            continue
           }
-          copyIconTemplate(iconName, options.icons);
+          copyIconTemplate(iconName, options.icons)
         }
 
-        ensureIconWrapper(options.dest, options.theme);
+        ensureIconWrapper(options.dest, options.theme)
       }
     }
-  });
-
+  })
 
 function copyIconTemplate(iconName, dest) {
-  const srcPath = path.join(COMPONENTS_DIR, "Icon.tsx");
-  const destPath = path.join(process.cwd(), dest, `${iconName}.tsx`);
+  const srcPath = path.join(COMPONENTS_DIR, 'Icon.tsx')
+  const destPath = path.join(process.cwd(), dest, `${iconName}.tsx`)
 
   if (!fs.existsSync(srcPath)) {
-    console.error(`❌ Plantilla de icono no encontrada en: ${srcPath}`);
-    return false;
+    console.error(`❌ Icon template not found in: ${srcPath}`)
+    return false
   }
 
   try {
-    let content = fs.readFileSync(srcPath, "utf-8");
-    content = content.replace(/\bIconName\b/g, iconName);
+    let content = fs.readFileSync(srcPath, 'utf-8')
+    content = content.replace(/\bIconName\b/g, iconName)
 
-    fs.ensureDirSync(path.dirname(destPath));
-    fs.writeFileSync(destPath, content);
+    fs.ensureDirSync(path.dirname(destPath))
+    fs.writeFileSync(destPath, content)
 
-    console.log(`✅ Icono "${iconName}" copiado a: ${destPath}`);
-    return true;
+    console.log(`✅ Icon "${iconName}" copied to: ${destPath}`)
+    return true
   } catch (err) {
-    console.error(`❌ No se pudo copiar el icono "${iconName}": ${err.message}`);
-    return false;
+    console.error(`❌ Could not copy icon "${iconName}": ${err.message}`)
+    return false
   }
 }
 
 function ensureIconWrapper(destComponents, destTheme) {
-  const wrapperComponentDest = path.join(process.cwd(), destComponents, "IconWrapper.tsx");
-  const wrapperRecipeDest = path.join(process.cwd(), destTheme, "IconWrapper.recipe.tsx");
+  const wrapperComponentDest = path.join(
+    process.cwd(),
+    destComponents,
+    'IconWrapper.tsx',
+  )
+  const wrapperRecipeDest = path.join(
+    process.cwd(),
+    destTheme,
+    'IconWrapper.recipe.tsx',
+  )
 
   if (fs.existsSync(wrapperComponentDest)) {
-    return;
+    return
   }
 
-  const wrapperComponentSrc = path.join(COMPONENTS_DIR, "IconWrapper.tsx");
-  const wrapperRecipeSrc = path.join(THEME_DIR, "IconWrapper.recipe.tsx");
+  const wrapperComponentSrc = path.join(COMPONENTS_DIR, 'IconWrapper.tsx')
+  const wrapperRecipeSrc = path.join(THEME_DIR, 'IconWrapper.recipe.tsx')
 
   if (fs.existsSync(wrapperComponentSrc)) {
-    fs.ensureDirSync(path.dirname(wrapperComponentDest));
-    fs.copySync(wrapperComponentSrc, wrapperComponentDest, { overwrite: true });
-    console.log(`✅ IconWrapper copiado a: ${wrapperComponentDest}`);
+    fs.ensureDirSync(path.dirname(wrapperComponentDest))
+    fs.copySync(wrapperComponentSrc, wrapperComponentDest, {overwrite: true})
+    console.log(`✅ IconWrapper copied to: ${wrapperComponentDest}`)
   }
 
   if (fs.existsSync(wrapperRecipeSrc)) {
-    fs.ensureDirSync(path.dirname(wrapperRecipeDest));
-    fs.copySync(wrapperRecipeSrc, wrapperRecipeDest, { overwrite: true });
-    console.log(`✅ IconWrapper recipe copiado a: ${wrapperRecipeDest}`);
+    fs.ensureDirSync(path.dirname(wrapperRecipeDest))
+    fs.copySync(wrapperRecipeSrc, wrapperRecipeDest, {overwrite: true})
+    console.log(`✅ IconWrapper recipe copied to: ${wrapperRecipeDest}`)
   }
 }
 
 program
-  .command("add-icon [iconName]")
-  .description("Copia un icono basado en la plantilla Icon.tsx")
-  .option("-n, --name <iconName>", "Nombre del icono")
-  .option("-d, --dest <path>", "Ruta de destino de iconos", "src/icons")
-  .option("-c, --components <path>", "Ruta de destino de componentes", "src/components")
-  .option("-t, --theme <path>", "Ruta de destino de recipes", "src/theme")
+  .command('add-icon [iconName]')
+  .description('Copies an icon based on the Icon.tsx template')
+  .option('-n, --name <iconName>', 'Icon name')
+  .option('-d, --dest <path>', 'Destination path for icons', 'src/icons')
+  .option(
+    '-c, --components <path>',
+    'Destination path for components',
+    'src/components',
+  )
+  .option('-t, --theme <path>', 'Destination path for recipes', 'src/theme')
   .action(async (iconNameArg, options) => {
-    const rawName = iconNameArg || options.name;
+    const rawName = iconNameArg || options.name
     if (!rawName) {
-      console.error("❌ Debes indicar el nombre del icono como argumento o con --name");
-      process.exit(1);
+      console.error(
+        '❌ You must specify the icon name as an argument or with --name',
+      )
+      process.exit(1)
     }
 
-    const finalName = rawName.charAt(0).toUpperCase() + rawName.slice(1);
-    const destPath = path.join(process.cwd(), options.dest, `${finalName}.tsx`);
+    const finalName = rawName.charAt(0).toUpperCase() + rawName.slice(1)
+    const destPath = path.join(process.cwd(), options.dest, `${finalName}.tsx`)
 
     if (fs.existsSync(destPath)) {
-      const { overwrite } = await inquirer.prompt([
+      const {overwrite} = await inquirer.prompt([
         {
-          type: "confirm",
-          name: "overwrite",
-          message: `El icono "${finalName}" ya existe. ¿Quieres sobrescribirlo?`,
+          type: 'confirm',
+          name: 'overwrite',
+          message: `The icon "${finalName}" already exists. Do you want to overwrite it?`,
           default: false,
         },
-      ]);
+      ])
       if (!overwrite) {
-        console.log("⏭️  Icono no sobrescrito.");
-        return;
+        console.log('⏭️ Icon not overwritten.')
+        return
       }
     }
 
-    copyIconTemplate(finalName, options.dest);
-    ensureIconWrapper(options.components, options.theme);
-  });
+    copyIconTemplate(finalName, options.dest)
+    ensureIconWrapper(options.components, options.theme)
+  })
 
-program.parse(process.argv);
+program.parse(process.argv)

package/lib/components/Drawer.tsx

@@ -9,7 +9,6 @@ import React, {
 import {
   Dimensions,
   Keyboard,
-  Platform,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
@@ -26,17 +25,14 @@ import Animated, {
 } from 'react-native-reanimated'
 import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
 import {DrawerTokens, DrawerStyles} from '../theme/Drawer.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
 import {
   StyleSheet,
   UnistylesRuntime,
   UnistylesVariants,
 } from 'react-native-unistyles'
 import {HStack} from '../patterns'
-
-/* -----------------------------
- * Types
- * ----------------------------*/
+import {ZINDEXES} from '../style/varia/constants'
 
 export type DrawerRef = {
   expand: () => void | null
@@ -55,12 +51,9 @@ type DrawerContextType = DrawerVariants & {
 type DrawerRootProps = DrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   children?: React.ReactNode
+  zIndex?: ZIndex
 }
 
-/* -----------------------------
- * Context
- * ----------------------------*/
-
 const DrawerContext = createContext<DrawerContextType | null>(null)
 const useDrawer = () => {
   const ctx = useContext(DrawerContext)
@@ -69,13 +62,10 @@ const useDrawer = () => {
   return ctx
 }
 
-/* -----------------------------
- * Root
- * ----------------------------*/
-
 const DrawerRoot = ({
   colorPalette = 'accent',
   variant = DrawerTokens.defaultProps.variant,
+  zIndex,
   children,
 }: DrawerRootProps) => {
   DrawerStyles.useVariants({variant})
@@ -86,8 +76,9 @@ const DrawerRoot = ({
       colorPalette,
       variant,
       overlayOpacity,
+      zIndex,
     }),
-    [colorPalette, variant],
+    [colorPalette, variant, zIndex],
   )
 
   return (
@@ -95,9 +86,6 @@ const DrawerRoot = ({
   )
 }
 
-/* -----------------------------
- * Positioner
- * ----------------------------*/
 const DrawerPositioner = ({
   children,
   direction,
@@ -147,9 +135,6 @@ const DrawerPositioner = ({
   )
 }
 
-/* -----------------------------
- * Overlay
- * ----------------------------*/
 const AnimatedTouchable = Animated.createAnimatedComponent(
   TouchableWithoutFeedback,
 )
@@ -190,10 +175,6 @@ const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
   )
 }
 
-/* -----------------------------
- * Slider (gestión independiente)
- * ----------------------------*/
-
 type InternalDrawerSliderProps = {
   axis: 'x' | 'y'
   direction: 1 | -1
@@ -207,6 +188,7 @@ type InternalDrawerSliderProps = {
   children?: React.ReactNode
   ref?: React.RefObject<DrawerRef | null>
   externalTranslate?: SharedValue<number>
+  zIndex?: ZIndex
 }
 
 export type DrawerSliderProps = Omit<
@@ -231,6 +213,7 @@ const DrawerSliderInternal = ({
   children,
   externalTranslate,
   ref,
+  zIndex,
 }: InternalDrawerSliderProps) => {
   const {variant, colorPalette, overlayOpacity} = useDrawer()
 
@@ -489,7 +472,7 @@ const DrawerSliderInternal = ({
         ref={viewRef}
         onLayout={onLayout}
         style={[
-          styles.slider,
+          styles.slider(zIndex || ZINDEXES.drawer),
           blockAnimatedStyle,
           DrawerStyles.slider(colorPalette),
           {pointerEvents: 'auto'},
@@ -523,14 +506,14 @@ const styles = StyleSheet.create((theme, rt) => ({
       _classNames: 'drawer-positioner-base',
     },
   },
-  slider: {
+  slider: (zIndex: ZIndex) => ({
     flex: 1,
     alignSelf: 'stretch',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    zIndex: 100,
+    zIndex,
     _web: {
       _classNames: 'drawer-slider-base',
     },
-  },
+  }),
 }))

package/lib/components/Modal.tsx

@@ -1,17 +1,13 @@
 import React, {createContext, useContext} from 'react'
-import {
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-  StyleSheet as RNStyleSheet,
-} from 'react-native'
+import {TouchableOpacity, TouchableWithoutFeedback, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {Portal} from '@gorhom/portal'
 import Svg, {Path} from 'react-native-svg'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
 import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
+import {ZINDEXES} from '../style/varia/constants'
 
 const AnimatedView = Animated.createAnimatedComponent(View)
 type ModalVariants = UnistylesVariants<typeof ModalStyles>
@@ -24,6 +20,7 @@ type ModalRootProps = ModalVariants & {
   portalHostName?: string
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
+  zIndex?: ZIndex
   children: React.ReactNode
 }
 
@@ -46,6 +43,7 @@ const ModalRoot = ({
   portalHostName = 'modal',
   isOpen,
   setIsOpen,
+  zIndex,
   children,
 }: ModalRootProps) => {
   ModalStyles.useVariants({
@@ -59,6 +57,7 @@ const ModalRoot = ({
     variant,
     animation,
     setIsOpen,
+    zIndex,
   }
 
   return (
@@ -85,6 +84,7 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
     variant,
     animation,
     setIsOpen,
+    zIndex,
   } = {...context, ...props}
 
   ModalStyles.useVariants({variant})
@@ -92,7 +92,10 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
   return (
     <AnimatedView
       testID="varia-modal-overlay"
-      style={[styles.overlay, ModalStyles.overlay(colorPalette)]}
+      style={[
+        styles.overlay(zIndex || ZINDEXES.modal),
+        ModalStyles.overlay(colorPalette),
+      ]}
       entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
       exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
       <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
@@ -226,15 +229,15 @@ const ModalCloseTrigger = ({children, style}: ModalCloseTriggerProps) => {
 
 const styles = StyleSheet.create(theme => {
   return {
-    overlay: {
-      ...RNStyleSheet.absoluteFillObject,
-      zIndex: 1000,
+    overlay: (zIndex: ZIndex) => ({
+      ...StyleSheet.absoluteFillObject,
+      zIndex,
       justifyContent: 'center',
       alignItems: 'center',
       _web: {
         _classNames: 'modal-overlay-base',
       },
-    },
+    }),
     content: () => ({
       justifyContent: 'center',
       alignItems: 'center',

package/lib/components/Select.tsx

@@ -23,8 +23,10 @@ import {
   Flex,
   PalettesWithNestedKeys,
   StackDirection,
+  ZIndex,
 } from '../style/varia/types'
 import {computeFlexSync} from '../style/varia/utils'
+import {ZINDEXES} from '../style/varia/constants'
 
 type SelectVariants = UnistylesVariants<typeof SelectStyles>
 
@@ -47,6 +49,7 @@ interface SelectContextType {
   variant: SelectVariants['variant']
   size: SelectVariants['size']
   flex: Flex
+  zIndex: ZIndex
 }
 
 const SelectContext = createContext<SelectContextType | undefined>(undefined)
@@ -70,6 +73,7 @@ type RootProps = SelectVariants & {
   flex?: Flex
   stretch?: AlignSelf
   direction?: 'row' | 'column'
+  zIndex?: ZIndex
 }
 
 const SelectRoot = ({
@@ -85,6 +89,7 @@ const SelectRoot = ({
   flex = 0,
   stretch,
   direction = 'column',
+  zIndex,
 }: RootProps) => {
   SelectStyles.useVariants({variant, size})
   const [internalValue, setInternalValue] = useState(defaultValue)
@@ -147,8 +152,11 @@ const SelectRoot = ({
               variant,
               size,
               flex,
+              zIndex,
             }}>
-            <View style={styles.portalContainer}>{portalChildren}</View>
+            <View style={styles.portalContainer(zIndex || ZINDEXES.select)}>
+              {portalChildren}
+            </View>
           </SelectContext.Provider>
         </Portal>
       )}
@@ -322,7 +330,8 @@ const styles = StyleSheet.create({
       _classNames: 'select-modal-content-base',
     },
   },
-  portalContainer: {
+  portalContainer: (zIndex: ZIndex) => ({
+    zIndex,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -333,5 +342,5 @@ const styles = StyleSheet.create({
     _web: {
       _classNames: 'select-portal-container-base',
     },
-  },
+  }),
 })

package/lib/components/Text.tsx

@@ -48,7 +48,7 @@ const Text = ({
 
 const styles = StyleSheet.create(theme => ({
   text: (color?: string, fontSize?: number) => ({
-    verticalAlign: 'bottom',
+    verticalAlign: 'middle',
     textAlign: 'left',
     ...(color && {
       color: extractThemeColor(color, theme),

package/lib/components/Toast.tsx

@@ -11,9 +11,10 @@ import Animated, {
 import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
 import {ToastStyles, ToastDefaultVariants} from '../theme/Toast.recipe'
 import {UnistylesVariants} from 'react-native-unistyles'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
 import Text from './Text'
 import {AnimatedHStack, VStack} from '../patterns'
+import {ZINDEXES} from '../style/varia/constants'
 
 type ToastVariants = UnistylesVariants<typeof ToastStyles>
 
@@ -23,6 +24,7 @@ export type ToastProps = ToastVariants & {
   duration?: number
   onClose?: () => void
   position?: 'top' | 'bottom'
+  zIndex?: ZIndex
 }
 
 const Toast: React.FC<ToastProps> = ({
@@ -33,6 +35,7 @@ const Toast: React.FC<ToastProps> = ({
   duration = 5000,
   onClose,
   position = 'bottom',
+  zIndex,
 }) => {
   ToastStyles.useVariants({variant, size})
 
@@ -88,7 +91,7 @@ const Toast: React.FC<ToastProps> = ({
           justifyContent:
             position === 'bottom' || !position ? 'flex-end' : 'flex-start',
         },
-        styles.container,
+        styles.container(zIndex || ZINDEXES.toast),
         ToastStyles.root,
       ]}>
       <AnimatedHStack
@@ -101,16 +104,16 @@ const Toast: React.FC<ToastProps> = ({
 }
 
 const styles = StyleSheet.create({
-  container: {
+  container: (zIndex: ZIndex) => ({
     alignItems: 'center',
     overflow: 'hidden',
-    zIndex: 100,
+    zIndex,
     pointerEvents: 'box-none',
     _web: {
       pointerEvents: 'none',
       _classNames: 'toast-container-base',
     },
-  },
+  }),
 })
 
 export default Toast

package/lib/theme/Select.recipe.tsx

@@ -24,15 +24,15 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
       size: {
         sm: {
           height: theme.sizes[9],
-          padding: theme.spacing[1],
+          paddingHorizontal: theme.spacing[1],
         },
         md: {
           height: theme.sizes[10],
-          padding: theme.spacing[2],
+          paddingHorizontal: theme.spacing[2],
         },
         lg: {
-          height: theme.sizes[11],
-          padding: theme.spacing[3],
+          height: theme.sizes[12],
+          paddingHorizontal: theme.spacing[3],
         },
         nosize: {},
       },

package/lib/varia/constants.ts

@@ -0,0 +1,6 @@
+export const ZINDEXES = {
+  drawer: 1000,
+  modal: 1001,
+  select: 1002,
+  toast: 1003,
+}

package/lib/varia/hooks/useZIndexGenerator.tsx

@@ -0,0 +1,12 @@
+import {useRef, useCallback} from 'react'
+
+export function useZIndexGenerator(base = 0) {
+  const counterRef = useRef(base)
+
+  const next = useCallback(() => {
+    counterRef.current += 1
+    return counterRef.current
+  }, [])
+
+  return next
+}

package/lib/varia/types.ts

@@ -286,3 +286,4 @@ export type progressDirection = 'forward' | 'reverse'
 export type rotationDirection = 'clockwise' | 'counterclockwise'
 export type Flex = ViewStyle['flex']
 export type MaxWidth = ViewStyle['maxWidth']
+export type ZIndex = ViewStyle['zIndex']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "bin": {
     "varia": "bin/cli.js"
   },