react-native-varia 0.2.2 → 0.2.4

package/bin/cli.js

@@ -1,32 +1,71 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require("commander");
+const inquirer = require("inquirer");
 const path = require("path");
 const fs = require("fs-extra");
 
-// Carpetas base
+const COMPONENT_DEPENDENCIES = {
+  Button: ["Spinner", "IconWrapper"],
+  Field: ["Text"],
+  Link: ["Text"],
+  Modal: ["Text"],
+  ReText: ["Text"],
+  Select: ["Text"],
+};
+
+const ICON_DEPENDENCIES = {
+  NumberInput: ["Plus", "Minus"],
+};
+
+const CONTEXT_DEPENDENCIES = {
+  Field: true
+};
+
+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 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)];
+}
+
 const COMPONENTS_DIR = path.join(__dirname, "../lib/components");
 const THEME_DIR = path.join(__dirname, "../lib/theme");
 
-/**
- * Obtiene la lista de todos los componentes disponibles en la librería.
- */
 function getAvailableComponents() {
   if (!fs.existsSync(COMPONENTS_DIR)) return [];
   return fs.readdirSync(COMPONENTS_DIR).map((name) => path.parse(name).name);
 }
 
-/**
- * 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) {
@@ -35,17 +74,28 @@ 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);
+}
+
+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 +103,141 @@ 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}`);
+      fs.ensureDirSync(path.dirname(variaDest));
+      fs.copySync(variaSrc, variaDest, { overwrite: true });
+      console.log(`✅ Carpeta "varia" copiada a ${variaDest}`);
+
+      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));
+    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 allComponentsArray = Array.from(allComponents);
+
+    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 +245,150 @@ program
       process.exit(1);
     }
 
-    componentsCapitalized.forEach((component) => {
-      copyComponentAndRecipe(component, options.dest, options.theme);
-    });
-  });
+    function copyContextComponentIfNeeded(component, destComponents, overwrite = true) {
+      if (!CONTEXT_DEPENDENCIES[component]) return;
 
-  
-  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;
+      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);
     }
-  
-    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;
+
+    for (const mainComponent of componentsCapitalized) {
+      const componentPath = path.join(process.cwd(), options.dest, `${mainComponent}.tsx`);
+      let overwriteMain = true;
+
+      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.`);
+        }
+      }
+
+      copyComponentAndRecipe(mainComponent, options.dest, options.theme, overwriteMain);
+
+      copyContextComponentIfNeeded(mainComponent, options.dest, overwriteMain);
+
+      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 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);
+        }
+
+        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;
+  }
+}
+
+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);
+}
+
+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`);
+
+    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/Accordion.tsx

@@ -0,0 +1,113 @@
+import React, {ReactNode, useState} from 'react'
+import {View, Pressable} from 'react-native'
+import Animated from 'react-native-reanimated'
+import {LinearTransition} from 'react-native-reanimated'
+import {StyleSheet} from 'react-native-unistyles'
+import Text from './Text'
+
+type AccordionItemProps = {
+  title: string
+  itemKey: string
+  children: ReactNode
+  isOpen?: boolean
+  onToggle?: () => void
+  scrollViewRef?: any
+}
+
+type AccordionGroupRootProps = {
+  children: ReactNode
+  defaultOpenKeys?: string[]
+  allowMultiple?: boolean
+}
+
+export const AccordionGroup = {
+  Root: AccordionGroupRoot,
+  Item: AccordionGroupItem,
+}
+
+function AccordionGroupRoot({
+  children,
+  defaultOpenKeys = [],
+  allowMultiple = false,
+}: AccordionGroupRootProps) {
+  const [openKeys, setOpenKeys] = useState<Set<string>>(
+    () => new Set(defaultOpenKeys),
+  )
+
+  const toggleItem = (key: string) => {
+    setOpenKeys(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(key)) {
+        newSet.delete(key)
+      } else {
+        if (allowMultiple) {
+          newSet.add(key)
+        } else {
+          return new Set([key])
+        }
+      }
+      return newSet
+    })
+  }
+
+  const items = React.Children.map(children, child => {
+    if (!React.isValidElement(child)) return child
+    const cp = child.props as AccordionItemProps
+    const key = cp.itemKey
+    const isOpen = openKeys.has(key)
+    return React.cloneElement(child, {
+      isOpen,
+      onToggle: () => toggleItem(key),
+    })
+  })
+
+  return <View style={styles.groupContainer}>{items}</View>
+}
+
+function AccordionGroupItem({
+  title,
+  children,
+  isOpen = false,
+  onToggle,
+}: AccordionItemProps) {
+  return (
+    <Animated.View
+      // Aquí aplicas la transición de layout
+      layout={LinearTransition.duration(150)}
+      style={styles.itemContainer}>
+      <Pressable onPress={onToggle} style={styles.header}>
+        <Text style={styles.headerText}>{title}</Text>
+      </Pressable>
+
+      {isOpen && (
+        <View style={styles.contentContainer}>
+          <View style={styles.innerContent}>{children}</View>
+        </View>
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  groupContainer: {},
+  itemContainer: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 6,
+    marginVertical: 8,
+    overflow: 'hidden', // importante para que no se vea contenido fuera
+  },
+  header: {
+    padding: 12,
+    backgroundColor: '#f0f0f0',
+  },
+  headerText: {
+    fontSize: 16,
+  },
+  contentContainer: {
+    // no necesitamos animar altura manual, lo hace el layout
+  },
+  innerContent: {
+    padding: 12,
+  },
+})