react-native-varia 0.2.1 → 0.2.3

package/bin/cli.js

@@ -1,9 +1,41 @@
 #!/usr/bin/env node
 
 const { program } = require("commander");
+const inquirer = require("inquirer");
 const path = require("path");
 const fs = require("fs-extra");
 
+// 🔹 Dependencias entre componentes
+const COMPONENT_DEPENDENCIES = {
+  Button: ["Spinner", "IconWrapper"],
+  Field: ["Text"],
+  Link: ["Text"],
+  Modal: ["Text"],
+  ReText: ["Text"],
+  Select: ["Text"],
+};
+
+const ICON_DEPENDENCIES = {
+  NumberInput: ["Plus", "Minus"],
+};
+
+/**
+ * Obtiene todas las dependencias de un componente de forma recursiva.
+ */
+function resolveDependencies(component, seen = new Set()) {
+  if (seen.has(component)) return [];
+  seen.add(component);
+
+  const deps = COMPONENT_DEPENDENCIES[component] || [];
+  let allDeps = [...deps];
+
+  for (const dep of deps) {
+    allDeps = [...allDeps, ...resolveDependencies(dep, seen)];
+  }
+
+  return [...new Set(allDeps)];
+}
+
 // Carpetas base
 const COMPONENTS_DIR = path.join(__dirname, "../lib/components");
 const THEME_DIR = path.join(__dirname, "../lib/theme");
@@ -19,14 +51,20 @@ function getAvailableComponents() {
 /**
  * Copia un archivo desde origen a destino.
  */
-function copyFile(srcPath, destPath, label) {
+function copyFile(srcPath, destPath, label, overwrite = true) {
   if (!fs.existsSync(srcPath)) {
     console.warn(`⚠️ ${label} no encontrado: ${srcPath}`);
     return false;
   }
   try {
-    fs.ensureDirSync(path.dirname(destPath)); // crea carpeta destino si no existe
-    fs.copySync(srcPath, destPath, { overwrite: true, errorOnExist: false });
+    fs.ensureDirSync(path.dirname(destPath));
+
+    if (!overwrite && fs.existsSync(destPath)) {
+      console.log(`⏭️  Saltando ${label}, ya existe en ${destPath}`);
+      return false;
+    }
+
+    fs.copySync(srcPath, destPath, { overwrite: true });
     console.log(`✅ ${label} copiado a: ${destPath}`);
     return true;
   } catch (err) {
@@ -38,14 +76,31 @@ function copyFile(srcPath, destPath, label) {
 /**
  * Copia un componente y su recipe.
  */
-function copyComponentAndRecipe(component, destComponents, destTheme) {
+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}"`);
+  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}"`);
+  copyFile(recipeSrc, recipeDest, `Recipe de "${component}"`, overwrite);
+}
+
+/**
+ * Pregunta si se desea sobrescribir componentes existentes.
+ */
+async function confirmOverwrite(existingComponents) {
+  const { overwrite } = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "overwrite",
+      message: `Los siguientes componentes ya existen: ${existingComponents.join(
+        ", "
+      )}\n¿Quieres sobrescribirlos?`,
+      default: false,
+    },
+  ]);
+  return overwrite;
 }
 
 program
@@ -53,74 +108,145 @@ program
   .description("CLI para instalar componentes de react-native-varia")
   .version("1.0.0");
 
-// program
-//   .command('setup')
-//   .description('Copia mixins y utils a src/styles')
-//   .action(() => {
-//     const sourceDir = path.join(__dirname, '../lib');
-//     const destDir = path.join(process.cwd(), 'src/style');
-
-//     const filesToCopy = ['mixins', 'utils', 'types'];
-
-//     filesToCopy.forEach((file) => {
-//       const srcPath = path.join(sourceDir, `${file}.ts`);
-//       const destPath = path.join(destDir, `${file}.ts`);
-
-//       try {
-//         fs.ensureDirSync(destDir); // Asegura que el directorio de destino exista
-//         fs.copySync(srcPath, destPath, { overwrite: true });
-//         console.log(`✅ ${file}.tsx copiado a ${destPath}`);
-//       } catch (err) {
-//         console.error(`❌ Error al copiar ${file}.tsx: ${err.message}`);
-//       }
-//     });
-//   });
-
 program
-  .command('setup')
-  .description('Copia la carpeta varia a src/styles/varia')
+  .command("setup")
+  .description("Copia la carpeta varia y patterns al proyecto (src/style/varia y src/patterns)")
   .action(() => {
-    const sourceDir = path.join(__dirname, '../lib/varia'); // carpeta a copiar
-    const destParentDir = path.join(process.cwd(), 'src/style'); // carpeta donde irá "varia"
-    const destDir = path.join(destParentDir, 'varia'); // ruta final completa
+    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");
 
     try {
-      fs.ensureDirSync(destParentDir); // asegúrate de que exista src/style
-      fs.copySync(sourceDir, destDir, { overwrite: true });
-      console.log(`✅ Carpeta "varia" copiada a ${destDir}`);
+      // Copiar varia
+      fs.ensureDirSync(path.dirname(variaDest));
+      fs.copySync(variaSrc, variaDest, { overwrite: true });
+      console.log(`✅ Carpeta "varia" copiada a ${variaDest}`);
+
+      // Copiar patterns
+      fs.ensureDirSync(path.dirname(patternsDest));
+      fs.copySync(patternsSrc, patternsDest, { overwrite: true });
+      console.log(`✅ Carpeta "patterns" copiada a ${patternsDest}`);
     } catch (err) {
-      console.error(`❌ Error al copiar la carpeta "varia": ${err.message}`);
+      console.error(`❌ Error durante el setup: ${err.message}`);
     }
   });
 
-  program
-  .command('add-patterns')
-  .description('Copia la carpeta lib/patterns a src/patterns')
+
+program
+  .command("add-patterns")
+  .description("Copia la carpeta lib/patterns a 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); // Asegura que el directorio de destino exista
+      fs.ensureDirSync(destDir);
       fs.copySync(sourceDir, destDir, { overwrite: true });
-      console.log('✅ Carpeta patterns copiada a src/patterns');
+      console.log("✅ Carpeta patterns copiada a src/patterns");
     } catch (err) {
       console.error(`❌ Error al copiar patterns: ${err.message}`);
     }
   });
 
+// 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);
+//       }
+//     }
+//   });
+
 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((components, options) => {
+  .option("-i, --icons <path>", "Ruta de destino de íconos", "src/icons")
+  .action(async (components, options) => {
     const available = getAvailableComponents();
     const componentsCapitalized = components.map(
       (c) => c.charAt(0).toUpperCase() + c.slice(1)
     );
 
-    const notFound = componentsCapitalized.filter((c) => !available.includes(c));
+    // 🔹 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:");
@@ -128,90 +254,151 @@ program
       process.exit(1);
     }
 
-    componentsCapitalized.forEach((component) => {
-      copyComponentAndRecipe(component, options.dest, options.theme);
-    });
-  });
+    // 🔹 Preparar instalación
+    for (const mainComponent of componentsCapitalized) {
+      const componentPath = path.join(process.cwd(), options.dest, `${mainComponent}.tsx`);
+      let overwriteMain = true;
 
-  
-  function copyIconTemplate(iconName, dest) {
-    const srcPath = path.join(COMPONENTS_DIR, "Icon.tsx"); // plantilla
-    const destPath = path.join(process.cwd(), dest, `${iconName}.tsx`); // nombre final
-  
-    if (!fs.existsSync(srcPath)) {
-      console.error(`❌ Plantilla de icono no encontrada en: ${srcPath}`);
-      return false;
-    }
-  
-    try {
-      // Leemos el contenido de la plantilla
-      let content = fs.readFileSync(srcPath, "utf-8");
-  
-      // Reemplazamos el nombre del componente (IconName → el nombre deseado)
-      content = content.replace(/\bIconName\b/g, iconName);
-  
-      fs.ensureDirSync(path.dirname(destPath)); // crear carpeta si no existe
-      fs.writeFileSync(destPath, content);
-  
-      console.log(`✅ Icono "${iconName}" copiado a: ${destPath}`);
-      return true;
-    } catch (err) {
-      console.error(`❌ No se pudo copiar el icono "${iconName}": ${err.message}`);
-      return false;
+      // 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);
+      }
+
+      // 🔹 Copiar íconos dependientes
+      const iconDeps = ICON_DEPENDENCIES[mainComponent] || [];
+      if (iconDeps.length > 0) {
+        console.log(`🎨 Añadiendo íconos requeridos por "${mainComponent}": ${iconDeps.join(", ")}`);
+
+        for (const iconName of iconDeps) {
+          const destIconPath = path.join(process.cwd(), options.icons, `${iconName}.tsx`);
+          if (fs.existsSync(destIconPath)) {
+            console.log(`⏭️  Icono "${iconName}" ya existe. No se sobrescribe.`);
+            continue;
+          }
+          copyIconTemplate(iconName, options.icons);
+        }
+
+        // Asegurar que IconWrapper esté disponible
+        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`);
+
+  if (!fs.existsSync(srcPath)) {
+    console.error(`❌ Plantilla de icono no encontrada en: ${srcPath}`);
+    return false;
   }
-  
-  /**
-   * Copia IconWrapper si no existe en la app
-   */
-  function ensureIconWrapper(destComponents, destTheme) {
-    const wrapperComponentDest = path.join(process.cwd(), destComponents, "IconWrapper.tsx");
-    const wrapperRecipeDest = path.join(process.cwd(), destTheme, "IconWrapper.recipe.tsx");
-  
-    if (fs.existsSync(wrapperComponentDest)) {
-      return; // ya existe
-    }
-  
-    const wrapperComponentSrc = path.join(COMPONENTS_DIR, "IconWrapper.tsx");
-    const wrapperRecipeSrc = path.join(THEME_DIR, "IconWrapper.recipe.tsx");
-  
-    // Copiar componente y recipe
-    if (fs.existsSync(wrapperComponentSrc)) {
-      fs.ensureDirSync(path.dirname(wrapperComponentDest));
-      fs.copySync(wrapperComponentSrc, wrapperComponentDest, { overwrite: true, errorOnExist: false });
-      console.log(`✅ IconWrapper copiado a: ${wrapperComponentDest}`);
-    }
-  
-    if (fs.existsSync(wrapperRecipeSrc)) {
-      fs.ensureDirSync(path.dirname(wrapperRecipeDest));
-      fs.copySync(wrapperRecipeSrc, wrapperRecipeDest, { overwrite: true, errorOnExist: false });
-      console.log(`✅ IconWrapper recipe copiado a: ${wrapperRecipeDest}`);
-    }
+
+  try {
+    let content = fs.readFileSync(srcPath, "utf-8");
+    content = content.replace(/\bIconName\b/g, iconName);
+
+    fs.ensureDirSync(path.dirname(destPath));
+    fs.writeFileSync(destPath, content);
+
+    console.log(`✅ Icono "${iconName}" copiado a: ${destPath}`);
+    return true;
+  } catch (err) {
+    console.error(`❌ No se pudo copiar el icono "${iconName}": ${err.message}`);
+    return false;
+  }
+}
+
+/**
+ * Copia IconWrapper si no existe en la app
+ */
+function ensureIconWrapper(destComponents, destTheme) {
+  const wrapperComponentDest = path.join(process.cwd(), destComponents, "IconWrapper.tsx");
+  const wrapperRecipeDest = path.join(process.cwd(), destTheme, "IconWrapper.recipe.tsx");
+
+  if (fs.existsSync(wrapperComponentDest)) {
+    return;
+  }
+
+  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}`);
+  }
+
+  if (fs.existsSync(wrapperRecipeSrc)) {
+    fs.ensureDirSync(path.dirname(wrapperRecipeDest));
+    fs.copySync(wrapperRecipeSrc, wrapperRecipeDest, { overwrite: true });
+    console.log(`✅ IconWrapper recipe copiado a: ${wrapperRecipeDest}`);
   }
-  
-  // Comando CLI
-  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")
-    .action((iconNameArg, options) => {
-      const rawName = iconNameArg || options.name;
-      if (!rawName) {
-        console.error("❌ Debes indicar el nombre del icono como argumento o con --name");
-        process.exit(1);
+}
+
+// Comando CLI: add-icon
+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")
+  .action(async (iconNameArg, options) => {
+    const rawName = iconNameArg || options.name;
+    if (!rawName) {
+      console.error("❌ Debes indicar el nombre del icono como argumento o con --name");
+      process.exit(1);
+    }
+
+    const finalName = rawName.charAt(0).toUpperCase() + rawName.slice(1);
+    const destPath = path.join(process.cwd(), options.dest, `${finalName}.tsx`);
+
+    // 🔹 Si ya existe, preguntar antes de sobrescribir
+    if (fs.existsSync(destPath)) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: `El icono "${finalName}" ya existe. ¿Quieres sobrescribirlo?`,
+          default: false,
+        },
+      ]);
+      if (!overwrite) {
+        console.log("⏭️  Icono no sobrescrito.");
+        return;
       }
-  
-      // Capitalizamos primera letra
-      const finalName = rawName.charAt(0).toUpperCase() + rawName.slice(1);
-  
-      copyIconTemplate(finalName, options.dest);
-  
-      // Aseguramos IconWrapper
-      ensureIconWrapper(options.components, options.theme);
-    });
-  
-
-program.parse(process.argv);
+    }
+
+    copyIconTemplate(finalName, options.dest);
+    ensureIconWrapper(options.components, options.theme);
+  });
+
+program.parse(process.argv);

package/lib/components/Badge.tsx

@@ -40,22 +40,14 @@ const Badge = ({
 
   const displayedContent = max && content > max ? `${max}+` : content
 
-  // @ts-ignore
-  const badgeSize = BadgeStyles.container(colorPalette).minWidth
-  const withoutChildrenSize = !children ? badgeSize : 'auto'
-
-  return (
-    <HStack
-      style={{
-        position: 'relative',
-        minWidth: withoutChildrenSize,
-        height: withoutChildrenSize,
-      }}>
-      {children && children}
+  return children ? (
+    <HStack style={{position: 'relative'}}>
+      {children}
       <View
         testID="varia-badge"
         style={[
-          styles.badge(x, y),
+          styles.badge,
+          styles.badgeAbsolute(x, y),
           BadgeStyles.container(colorPalette),
           mixins && mixins,
         ]}>
@@ -64,18 +56,23 @@ const Badge = ({
         </Text>
       </View>
     </HStack>
+  ) : (
+    <View
+      testID="varia-badge"
+      style={[
+        styles.badge,
+        BadgeStyles.container(colorPalette),
+        mixins && mixins,
+      ]}>
+      <Text style={[styles.text, BadgeStyles.text(colorPalette)]}>
+        {displayedContent}
+      </Text>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  badge: (x, y) => ({
-    position: 'absolute',
-    [y]: 0,
-    [x]: 0,
-    transform: [
-      {translateY: y === 'top' ? '-30%' : '30%'},
-      {translateX: x === 'left' ? '-30%' : '30%'},
-    ],
+  badge: {
     paddingVertical: 1,
     paddingHorizontal: 6,
     zIndex: 1,
@@ -83,6 +80,15 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  badgeAbsolute: (x, y) => ({
+    position: 'absolute',
+    [y]: 0,
+    [x]: 0,
+    transform: [
+      {translateY: y === 'top' ? '-50%' : '50%'},
+      {translateX: x === 'left' ? '-50%' : '50%'},
+    ],
   }),
   text: {
     textAlign: 'center',

package/lib/components/Button.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {ButtonStyles, ButtonDefaultVariants} from '../theme/Button.recipe'
 import {useMemo} from 'react'
 import {IconWrapperProps} from './IconWrapper'
-import Spinner from './Spinner'
+import Spinner, {SpinnerProps} from './Spinner'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
 type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
@@ -12,7 +12,7 @@ type ButtonVariants = UnistylesVariants<typeof ButtonStyles>
 
 type ButtonProps = ButtonVariants & {
   colorPalette?: PalettesWithNestedKeys
-  text: string
+  text?: string
   onPress: () => void
   loading?: boolean
   disabled?: boolean
@@ -21,7 +21,7 @@ type ButtonProps = ButtonVariants & {
   textAdjustment?: TextAdjustment
   icon?: {
     component: React.ComponentType<IconWrapperProps>
-    position: 'left' | 'right'
+    position?: 'left' | 'right'
     scale?: number
     rotation?: number
     size?: number
@@ -75,7 +75,6 @@ const Button = ({
         rotation: icon.rotation,
         scale: icon.scale,
         colorPalette,
-        //@ts-ignore
         size: icon.size,
         color: ButtonStyles.text(colorPalette).color,
       }}
@@ -93,19 +92,19 @@ const Button = ({
       disabled={disabled || loading}>
       {loading ? (
         <Spinner
-          //@ts-ignore
-          size={ButtonStyles.text.fontSize}
-          //@ts-ignore
-          color={ButtonStyles.text.color}
+          size={size as SpinnerProps['size']}
+          color={ButtonStyles.text(colorPalette).color}
         />
       ) : (
         <>
           {icon?.position === 'left' && IconRendered}
-          <Text
-            {...getTextProps()}
-            style={[styles.text, ButtonStyles.text(colorPalette)]}>
-            {text}
-          </Text>
+          {text && (
+            <Text
+              {...getTextProps()}
+              style={[styles.text, ButtonStyles.text(colorPalette)]}>
+              {text}
+            </Text>
+          )}
           {icon?.position === 'right' && IconRendered}
         </>
       )}