@acvl/mobile-components 0.0.5 → 0.0.7

package/lib/typescript/src/pantallas/PantallaDePerfil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PantallaDePerfil.d.ts","sourceRoot":"","sources":["../../../../src/pantallas/PantallaDePerfil.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,QAAgB,EAChB,QAAQ,GACX,EAAE;IACC,yFAAyF;IACzF,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,qBA4DA"}
+{"version":3,"file":"PantallaDePerfil.d.ts","sourceRoot":"","sources":["../../../../src/pantallas/PantallaDePerfil.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4B1B;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,QAAgB,EAChB,QAAQ,GACX,EAAE;IACC,yFAAyF;IACzF,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,qBA6DA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acvl/mobile-components",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "description": "Librería de componentes de las apps móviles de ACV (Expo / React Native).",
     "homepage": "https://github.com/ACV-Logistics/acv-mobile-components#readme",
     "bugs": {

package/src/camara/CampoDeFotos.tsx

@@ -13,6 +13,7 @@ import {
     type ArchivoElegido,
     type PermisoDeCamara,
 } from "./elegir";
+import { useTextos } from "../idioma";
 
 /**
  * Una foto que ya está en el servidor (la de una captura que se vuelve a abrir): se enseña con su
@@ -68,6 +69,7 @@ export function CampoDeFotos({
     disabled?: boolean;
 }) {
     const styles = useStyles();
+    const t = useTextos();
     // Reducir una foto tarda (se decodifica completa): el botón gira mientras tanto.
     const [eligiendo, setEligiendo] = React.useState<"camara" | "galeria" | null>(null);
 
@@ -116,7 +118,7 @@ export function CampoDeFotos({
                         disabled={disabled || eligiendo !== null}
                         onPress={() => void agregar("camara")}
                     >
-                        Tomar foto
+                        {t.fotos.tomarFoto}
                     </BotonGrande>
                     <BotonGrande
                         icono="image-outline"
@@ -125,7 +127,7 @@ export function CampoDeFotos({
                         disabled={disabled || eligiendo !== null}
                         onPress={() => void agregar("galeria")}
                     >
-                        De la galería
+                        {t.fotos.deLaGaleria}
                     </BotonGrande>
                 </View>
             </View>

package/src/camara/elegir.ts

@@ -4,6 +4,7 @@
 import * as ImagePicker from "expo-image-picker";
 import { avisar } from "../dialogos/dialogos";
 import { reducirFoto } from "./reducir";
+import { textosActuales } from "../idioma";
 
 /** Lo elegido: dónde está en el teléfono, su nombre, su tipo y si es una foto. */
 export interface ArchivoElegido {
@@ -43,15 +44,15 @@ export async function pedirPermisoDeCamara({
     if (actual.granted) return true;
     if (!actual.canAskAgain) {
         await avisar({
-            titulo: "Sin permiso de cámara",
-            mensaje: `Para ${para}, activa la cámara para la app en los ajustes del teléfono.`,
+            titulo: textosActuales().fotos.sinPermisoDeCamara,
+            mensaje: textosActuales().fotos.activaLaCamara(para),
             icono: "camera-off-outline",
         });
         return false;
     }
     if (explicacion) {
         await avisar({
-            titulo: "La cámara",
+            titulo: textosActuales().fotos.laCamara,
             mensaje: explicacion,
             icono: "camera-outline",
             cancelable: false,

package/src/componentes/AccionesDelEncabezado.tsx

@@ -11,6 +11,7 @@ import {
     type LayoutChangeEvent,
 } from "react-native";
 import { Menu } from "react-native-paper";
+import { useTextos } from "../idioma";
 
 /** Lo que mide un botón y lo que se separan: con eso se cuenta cuántos caben. */
 const LADO = 40;
@@ -106,6 +107,7 @@ const Boton = ({
  */
 export default function AccionesDelEncabezado({ acciones }: { acciones: AccionDelEncabezado[] }) {
     const c = usePaleta();
+    const t = useTextos();
     const styles = useStyles();
     const [hueco, setHueco] = React.useState<number | null>(null);
     const [menuAbierto, setMenuAbierto] = React.useState(false);
@@ -160,7 +162,7 @@ export default function AccionesDelEncabezado({ acciones }: { acciones: AccionDe
                             anchor={
                                 <Boton
                                     accion={{
-                                        etiqueta: "Más acciones",
+                                        etiqueta: t.listas.masAcciones,
                                         icono: "dots-vertical",
                                         insignia: escondidas,
                                     }}

package/src/componentes/BotonDeAvatar.tsx

@@ -1,6 +1,7 @@
 import { Pressable, StyleSheet } from "react-native";
 import { Avatar } from "react-native-paper";
 import { tipografia } from "../tema";
+import { useTextos } from "../idioma";
 
 /**
  * La inicial de cada parte, hasta dos: `inicialesDe(nombre, apellidos)` da «JP»; con sólo el nombre
@@ -22,29 +23,32 @@ export const inicialesDe = (...partes: (string | null | undefined)[]): string =>
 const BotonDeAvatar = ({
     iniciales,
     onPress,
-    etiqueta = "Perfil",
+    etiqueta,
 }: {
     iniciales: string;
     onPress: () => void;
     /** Lo que lee el lector de pantalla. */
     etiqueta?: string;
-}) => (
-    <Pressable
-        onPress={onPress}
-        hitSlop={8}
-        accessibilityRole="button"
-        accessibilityLabel={etiqueta}
-        style={({ pressed }) => [styles.btn, pressed && { opacity: 0.6 }]}
-    >
-        <Avatar.Text
-            size={36}
-            label={iniciales.slice(0, 2).toUpperCase()}
-            // Blanca sobre el rojo en los dos modos: el tema oscuro de Paper la ponía oscura.
-            color="#ffffff"
-            labelStyle={styles.initial}
-        />
-    </Pressable>
-);
+}) => {
+    const t = useTextos();
+    return (
+        <Pressable
+            onPress={onPress}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel={etiqueta ?? t.perfil.titulo}
+            style={({ pressed }) => [styles.btn, pressed && { opacity: 0.6 }]}
+        >
+            <Avatar.Text
+                size={36}
+                label={iniciales.slice(0, 2).toUpperCase()}
+                // Blanca sobre el rojo en los dos modos: el tema oscuro de Paper la ponía oscura.
+                color="#ffffff"
+                labelStyle={styles.initial}
+            />
+        </Pressable>
+    );
+};
 
 const styles = StyleSheet.create({
     btn: {

package/src/componentes/CabeceraEmpujada.tsx

@@ -8,6 +8,7 @@ import { router } from "expo-router";
 import type React from "react";
 import { TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTextos } from "../idioma";
 
 /**
  * La cabecera de una pantalla empujada encima de las pestañas: atrás, el rótulo, el título y, si
@@ -31,10 +32,11 @@ const CabeceraEmpujada = ({
     const c = usePaleta();
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
     return (
         <View style={[styles.hdr, { paddingTop: insets.top + 10 }]}>
             <View style={styles.hdrRow}>
-                <TouchableOpacity onPress={() => router.back()} accessibilityLabel="Atrás">
+                <TouchableOpacity onPress={() => router.back()} accessibilityLabel={t.comun.atras}>
                     <MaterialIcons name="arrow-back" size={45} color={c.primary} />
                 </TouchableOpacity>
                 {/* `flexShrink` y no `flex`: con acciones, el título les deja su hueco. */}

package/src/componentes/PantallaDeError.tsx

@@ -5,6 +5,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { Text } from "../texto";
 import { crearEstilos, tipografia, usePaleta } from "../tema";
 import BotonGrande from "./BotonGrande";
+import { useTextos } from "../idioma";
 
 /** Lo que expo-router le pasa al `ErrorBoundary` de un layout. */
 export interface PropsDePantallaDeError {
@@ -27,7 +28,7 @@ const PantallaDeError = ({
     error,
     retry,
     onError,
-    mensaje = "Esta pantalla no se pudo abrir. Intenta de nuevo; si vuelve a pasar, avisa a soporte.",
+    mensaje,
 }: PropsDePantallaDeError & {
     onError?: (error: Error) => void;
     /** Lo que se le dice a quien la ve: qué no se perdió y a quién avisar. */
@@ -35,6 +36,7 @@ const PantallaDeError = ({
 }) => {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     useEffect(() => {
         onError?.(error);
         // Se reporta una vez por error, aunque quien llama pase un `onError` nuevo en cada render.
@@ -45,10 +47,10 @@ const PantallaDeError = ({
         <SafeAreaView style={styles.root}>
             <ScrollView contentContainerStyle={styles.contenido}>
                 <MaterialCommunityIcons name="alert-octagon-outline" size={64} color={c.primary} />
-                <Text style={styles.titulo}>Algo salió mal</Text>
-                <Text style={styles.texto}>{mensaje}</Text>
+                <Text style={styles.titulo}>{t.error.titulo}</Text>
+                <Text style={styles.texto}>{mensaje ?? t.error.mensaje}</Text>
                 <BotonGrande icono="refresh" onPress={() => void retry()}>
-                    Reintentar
+                    {t.comun.reintentar}
                 </BotonGrande>
             </ScrollView>
         </SafeAreaView>

package/src/componentes/TiraDeFotos.tsx

@@ -5,6 +5,7 @@ import { crearEstilos, tipografia, usePaleta } from "../tema";
 import { Text } from "../texto";
 import Foto, { type FotoAVer } from "./Foto";
 import VisorDeFoto from "./VisorDeFoto";
+import { useTextos } from "../idioma";
 
 /** Una miniatura de la tira: qué se pinta, qué abre el visor y qué se puede hacer con ella. */
 export interface FotoDeLaTira {
@@ -41,6 +42,7 @@ interface Props {
  */
 const TiraDeFotos = ({ fotos: piezas, lado, cuadricula = false }: Props) => {
     const styles = useStyles();
+    const t = useTextos();
     const [viendo, setViendo] = React.useState<number | null>(null);
     if (piezas.length === 0) return null;
 
@@ -56,7 +58,7 @@ const TiraDeFotos = ({ fotos: piezas, lado, cuadricula = false }: Props) => {
                 onPress={() => setViendo(fotos.indexOf(p))}
                 accessibilityRole={p.esFoto ? "imagebutton" : undefined}
                 accessibilityLabel={
-                    p.etiqueta ?? (p.esFoto ? "Ver la foto" : `Archivo ${p.nombre ?? ""}`.trim())
+                    p.etiqueta ?? (p.esFoto ? t.fotos.verLaFoto : t.fotos.archivo(p.nombre ?? ""))
                 }
             >
                 {p.esFoto ? (
@@ -84,7 +86,7 @@ const TiraDeFotos = ({ fotos: piezas, lado, cuadricula = false }: Props) => {
                     onPress={p.onQuitar}
                     hitSlop={10}
                     accessibilityRole="button"
-                    accessibilityLabel={p.esFoto ? "Quitar esta foto" : "Quitar este archivo"}
+                    accessibilityLabel={p.esFoto ? t.fotos.quitarFoto : t.fotos.quitarArchivo}
                     style={styles.quitar}
                 >
                     <MaterialCommunityIcons name="close" size={24} color="#fff" />

package/src/componentes/VisorDeFoto.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Foto, { type FotoAVer } from "./Foto";
+import { useTextos } from "../idioma";
 
 export type { FotoAVer };
 
@@ -78,6 +79,7 @@ function Carrusel({
 }) {
     const insets = useSafeAreaInsets();
     const { width, height } = useWindowDimensions();
+    const t = useTextos();
     const primera = Math.min(inicio, Math.max(0, fotos.length - 1));
     const [actual, setActual] = React.useState(primera);
     const [descarga, setDescarga] = React.useState<Descarga>("nada");
@@ -121,9 +123,7 @@ function Carrusel({
 
             <View style={[styles.barra, { top: insets.top + 12 }]}>
                 {fotos.length > 1 ? (
-                    <Text style={styles.cuenta}>
-                        {actual + 1} de {fotos.length}
-                    </Text>
+                    <Text style={styles.cuenta}>{t.fotos.deTotal(actual + 1, fotos.length)}</Text>
                 ) : (
                     <View />
                 )}
@@ -135,10 +135,10 @@ function Carrusel({
                             accessibilityRole="button"
                             accessibilityLabel={
                                 descarga === "lista"
-                                    ? "Guardada en la galería"
+                                    ? t.fotos.guardada
                                     : descarga === "fallo"
-                                      ? "No se pudo guardar; intentar de nuevo"
-                                      : "Guardar en la galería"
+                                      ? t.fotos.noSeGuardo
+                                      : t.fotos.guardarEnGaleria
                             }
                             accessibilityState={{ busy: descarga === "bajando" }}
                         >
@@ -153,7 +153,7 @@ function Carrusel({
                             )}
                         </Pressable>
                     ) : null}
-                    <Pressable onPress={onCerrar} hitSlop={12} accessibilityLabel="Cerrar">
+                    <Pressable onPress={onCerrar} hitSlop={12} accessibilityLabel={t.comun.cerrar}>
                         <MaterialCommunityIcons name="close" size={32} color="#fff" />
                     </Pressable>
                 </View>

package/src/dialogos/HostDeDialogos.tsx

@@ -10,6 +10,7 @@ import {
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import React from "react";
 import { Modal, Pressable, ScrollView, useWindowDimensions, View } from "react-native";
+import { useTextos } from "../idioma";
 
 /**
  * Pinta los diálogos que abre `mostrarDialogo` (`dialogos.ts`), de uno en uno. Se monta una
@@ -23,6 +24,7 @@ import { Modal, Pressable, ScrollView, useWindowDimensions, View } from "react-n
  */
 const HostDeDialogos = () => {
     const c = usePaleta();
+    const t = useTextos();
     const styles = useStyles();
     const dialogo = React.useSyncExternalStore(suscribirDialogos, dialogoActual);
     const { height } = useWindowDimensions();
@@ -45,7 +47,7 @@ const HostDeDialogos = () => {
             navigationBarTranslucent
             onRequestClose={cerrar}
         >
-            <Pressable style={styles.fondo} onPress={cerrar} accessibilityLabel="Cerrar">
+            <Pressable style={styles.fondo} onPress={cerrar} accessibilityLabel={t.comun.cerrar}>
                 {/* El `Pressable` vacío de la tarjeta se queda con el toque: tocar adentro no cierra. */}
                 <Pressable
                     style={[styles.tarjeta, { maxHeight: height * 0.85 }]}

package/src/dialogos/dialogos.ts

@@ -3,6 +3,7 @@
 // navegación). Los pinta `HostDeDialogos`, montado una vez en el layout raíz.
 import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import type React from "react";
+import { textosActuales } from "../idioma";
 
 type NombreDeIcono = React.ComponentProps<typeof MaterialCommunityIcons>["name"];
 
@@ -73,7 +74,7 @@ export async function confirmar({
     titulo,
     mensaje,
     textoConfirmar,
-    textoCancelar = "Cancelar",
+    textoCancelar,
     destructivo = false,
     icono,
 }: {
@@ -94,7 +95,11 @@ export async function confirmar({
                 estilo: destructivo ? "destructivo" : "principal",
                 valor: true,
             },
-            { texto: textoCancelar, estilo: "cancelar", valor: false },
+            {
+                texto: textoCancelar ?? textosActuales().comun.cancelar,
+                estilo: "cancelar",
+                valor: false,
+            },
         ],
     });
     return respuesta === true;
@@ -105,7 +110,7 @@ export async function avisar({
     titulo,
     mensaje,
     icono = "information-outline",
-    textoBoton = "Entendido",
+    textoBoton,
     cancelable = true,
 }: {
     titulo: string;
@@ -119,7 +124,13 @@ export async function avisar({
         mensaje,
         icono,
         cancelable,
-        botones: [{ texto: textoBoton, estilo: "principal", valor: true }],
+        botones: [
+            {
+                texto: textoBoton ?? textosActuales().comun.entendido,
+                estilo: "principal",
+                valor: true,
+            },
+        ],
     });
 }
 

package/src/formularios/SelectorDeOpcion.tsx

@@ -15,6 +15,7 @@ import IconoDeRenglon from "../componentes/IconoDeRenglon";
 import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
 import { Text, TextInput } from "../texto";
 import { CajaDeCampo } from "./campos";
+import { useTextos } from "../idioma";
 
 /** Una opción de una lista: lo que se guarda (`value`) y lo que se lee (`label`). */
 export interface Opcion {
@@ -111,7 +112,7 @@ function HojaDeOpciones<T extends Opcion>({
     onTocar,
     detalle,
     grupo,
-    vacio = "Nada que coincida.",
+    vacio,
     encabezado,
     pie,
 }: {
@@ -133,12 +134,13 @@ function HojaDeOpciones<T extends Opcion>({
     const c = usePaleta();
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
 
     return (
         <Modal visible={abierto} animationType="slide" onRequestClose={onCerrar}>
             <View style={[styles.hoja, { paddingTop: insets.top + 10 }]}>
                 <View style={styles.cabecera}>
-                    <TouchableOpacity onPress={onCerrar}>
+                    <TouchableOpacity onPress={onCerrar} accessibilityLabel={t.comun.atras}>
                         <MaterialIcons name="arrow-back" size={45} color={c.primary} />
                     </TouchableOpacity>
                     <Text style={styles.titulo}>{etiqueta}</Text>
@@ -146,7 +148,7 @@ function HojaDeOpciones<T extends Opcion>({
                 <TextInput
                     value={texto}
                     onChangeText={onBuscar}
-                    placeholder="Buscar"
+                    placeholder={t.comun.buscar}
                     placeholderTextColor={c.secondaryLight}
                     autoCorrect={false}
                     autoCapitalize="characters"
@@ -163,7 +165,12 @@ function HojaDeOpciones<T extends Opcion>({
                     }}
                     ListHeaderComponent={encabezado}
                     ListEmptyComponent={
-                        cargando ? null : <EstadoVacio icono="magnify" titulo={vacio} />
+                        cargando ? null : (
+                            <EstadoVacio
+                                icono="magnify"
+                                titulo={vacio ?? t.listas.nadaQueCoincida}
+                            />
+                        )
                     }
                     renderItem={({ item, index }) => {
                         const rotulo = grupo?.(item);
@@ -217,6 +224,7 @@ function RenglonDelSelector({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     return (
         <CajaDeCampo
             etiqueta={etiqueta}
@@ -227,7 +235,9 @@ function RenglonDelSelector({
             pendiente={pendiente}
         >
             <View style={styles.renglon}>
-                <Text style={[styles.valor, !texto && styles.sinValor]}>{texto ?? "Elegir…"}</Text>
+                <Text style={[styles.valor, !texto && styles.sinValor]}>
+                    {texto ?? t.comun.elegir}
+                </Text>
                 <IconoDeRenglon
                     name="chevron-down"
                     fontSize={tipografia.subtitulo}
@@ -253,13 +263,14 @@ export default function SelectorDeOpcion<T extends Opcion>(props: PropsDeSelecto
         detalle,
         grupo,
         opcional,
-        textoDeNinguno = "Ninguno",
+        textoDeNinguno,
         vacio,
         disabled,
         accesorio,
         resaltarVacio,
     } = props;
     const styles = useStyles();
+    const t = useTextos();
     const [abierto, setAbierto] = React.useState(false);
     const { texto, buscar, visibles } = useBuscador(props);
 
@@ -296,7 +307,9 @@ export default function SelectorDeOpcion<T extends Opcion>(props: PropsDeSelecto
                 encabezado={
                     opcional ? (
                         <Pressable onPress={() => elegir(null)} style={styles.opcion}>
-                            <Text style={styles.opcionNombre}>{textoDeNinguno}</Text>
+                            <Text style={styles.opcionNombre}>
+                                {textoDeNinguno ?? t.comun.ninguno}
+                            </Text>
                         </Pressable>
                     ) : null
                 }
@@ -329,6 +342,7 @@ export function SelectorDeVarias<T extends Opcion>(props: PropsDeSelectorDeVaria
     } = props;
     const [abierto, setAbierto] = React.useState(false);
     const [marcadas, setMarcadas] = React.useState<T[]>(valor);
+    const t = useTextos();
     const { texto, buscar, visibles } = useBuscador(props);
 
     const abrir = () => {
@@ -377,7 +391,7 @@ export function SelectorDeVarias<T extends Opcion>(props: PropsDeSelectorDeVaria
                             cerrar();
                         }}
                     >
-                        {marcadas.length ? `Listo (${marcadas.length})` : "Listo"}
+                        {marcadas.length ? t.listas.listoCon(marcadas.length) : t.comun.listo}
                     </BotonGrande>
                 }
             />

package/src/formularios/campos.tsx

@@ -12,6 +12,7 @@ import IconoDeRenglon from "../componentes/IconoDeRenglon";
 import OpcionesExcluyentes from "../componentes/OpcionesExcluyentes";
 import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
 import { Text, TextInput } from "../texto";
+import { useTextos } from "../idioma";
 
 /**
  * Los campos de un formulario (un viaje, un tracto, un operador). Cada uno es una caja con su
@@ -245,6 +246,7 @@ export function CampoDeFechaHora({
     const c = usePaleta();
     const styles = useStyles();
     const [eligiendo, setEligiendo] = React.useState<"date" | "time" | null>(null);
+    const t = useTextos();
     // Vacío, el selector arranca en la próxima hora en punto: la hora de ahora no le sirve a nadie.
     const base = valor ?? dayjs().add(1, "hour").startOf("hour").toDate();
 
@@ -296,7 +298,7 @@ export function CampoDeFechaHora({
                             fontSize={tipografia.subtitulo}
                             color={c.secondaryLight}
                         />
-                        <Text style={[styles.textoFecha, styles.sinValor]}>Elegir…</Text>
+                        <Text style={[styles.textoFecha, styles.sinValor]}>{t.comun.elegir}</Text>
                     </View>
                 )}
             </CajaDeCampo>
@@ -335,12 +337,13 @@ export function CampoDeFechaHora({
 /** El «Quitar» de una fecha opcional: la ✕ junto al rótulo, dentro de la caja. */
 function BotonDeQuitar({ onPress }: { onPress: () => void }) {
     const c = usePaleta();
+    const t = useTextos();
     return (
         <Pressable
             onPress={onPress}
             hitSlop={10}
             accessibilityRole="button"
-            accessibilityLabel="Quitar"
+            accessibilityLabel={t.comun.quitar}
         >
             <IconoDeRenglon
                 name="close-circle"
@@ -418,6 +421,7 @@ export function CampoDeFecha({
     const c = usePaleta();
     const styles = useStyles();
     const [eligiendo, setEligiendo] = React.useState(false);
+    const t = useTextos();
     const fecha = valor ? dayjs(valor) : null;
 
     return (
@@ -438,7 +442,7 @@ export function CampoDeFecha({
                         color={fecha ? c.secondary : c.secondaryLight}
                     />
                     <Text style={[styles.textoFecha, !fecha && styles.sinValor]}>
-                        {fecha ? fecha.format("D MMM YYYY") : "Elegir…"}
+                        {fecha ? fecha.format("D MMM YYYY") : t.comun.elegir}
                     </Text>
                 </View>
             </CajaDeCampo>
@@ -528,6 +532,7 @@ export function CampoDeTelefono({
     const styles = useStyles();
     const { entrada, enfocada, enfocar, alEnfocar, alSalir } = useEntradaEnCaja();
     const { lada, digitos } = partirTelefono(valor);
+    const t = useTextos();
     const armar = (nuevaLada: string, nuevosDigitos: string) => {
         const solo = nuevosDigitos.replace(/\D/g, "");
         onCambiar(solo ? `${nuevaLada}${solo}` : null);
@@ -569,7 +574,7 @@ export function CampoDeTelefono({
                         onBlur={alSalir}
                         keyboardType="phone-pad"
                         maxLength={10}
-                        placeholder="10 dígitos"
+                        placeholder={t.campos.diezDigitos}
                         accessibilityLabel={etiqueta}
                         style={styles.texto}
                     />

package/src/formularios/guardado.ts

@@ -3,6 +3,7 @@ import React from "react";
 import type { FieldValues, UseFormReturn } from "react-hook-form";
 import { avisar } from "../dialogos/dialogos";
 import { mensajeDeError, setErrors } from "./errores";
+import { textosActuales } from "../idioma";
 
 /**
  * Lo que comparten los formularios de edición: cómo se compara lo capturado contra lo que vino,
@@ -54,9 +55,10 @@ export function useGuardado<T extends FieldValues>(form: UseFormReturn<T>) {
             router.back();
         } catch (falla) {
             volcarErrores(form, falla);
-            const mensaje = mensajeDeError(falla, "Revisa la señal e intenta de nuevo.");
+            const t = textosActuales();
+            const mensaje = mensajeDeError(falla, t.comun.revisaLaSenal);
             setError(mensaje);
-            await avisar({ titulo: "No se guardó", mensaje, icono: "alert-circle-outline" });
+            await avisar({ titulo: t.edicion.noSeGuardo, mensaje, icono: "alert-circle-outline" });
         }
     };
     return { error, guardar };

package/src/fotos/elegir.ts

@@ -11,6 +11,7 @@ import {
 } from "../camara/elegir";
 import { reducirImagenAdjunta } from "../camara/reducir";
 import { avisar, mostrarDialogo } from "../dialogos/dialogos";
+import { textosActuales } from "../idioma";
 
 /** El tope de un archivo en el servidor (`ConArchivoSubido.TAMANO_MAXIMO`): 25 MB. */
 export const TAMANO_MAXIMO_BYTES = 25 * 1024 * 1024;
@@ -48,10 +49,12 @@ export async function elegirDocumentos({
         const pesa = doc.size ?? new File(doc.uri).size;
         if (pesa > tamanoMaximo) {
             await avisar({
-                titulo: "Archivo demasiado pesado",
-                mensaje:
-                    `«${doc.name}» pesa ${(pesa / (1024 * 1024)).toFixed(1)} MB y el tope son ` +
-                    `${tamanoMaximo / (1024 * 1024)} MB. Elige uno más ligero o tómale una foto.`,
+                titulo: textosActuales().fotos.demasiadoPesado,
+                mensaje: textosActuales().fotos.pesaDeMas(
+                    doc.name,
+                    (pesa / (1024 * 1024)).toFixed(1),
+                    tamanoMaximo / (1024 * 1024),
+                ),
                 icono: "file-alert-outline",
             });
             continue;
@@ -71,7 +74,7 @@ export async function elegirDocumentos({
  * cualquier paso o el archivo no se puede subir (y ya se dijo por qué).
  */
 export async function elegirAdjunto({
-    titulo = "Subir un archivo",
+    titulo,
     permiso,
     tipos,
 }: {
@@ -79,29 +82,30 @@ export async function elegirAdjunto({
     permiso: PermisoDeCamara;
     tipos?: string[];
 }): Promise<ArchivoElegido | null> {
+    const t = textosActuales();
     const origen = await mostrarDialogo<"camara" | "galeria" | "documento" | null>({
-        titulo,
+        titulo: titulo ?? t.fotos.subirArchivo,
         icono: "paperclip",
         botones: [
             {
-                texto: "Tomar una foto",
+                texto: t.fotos.tomarUnaFoto,
                 icono: "camera-outline",
                 estilo: "principal",
                 valor: "camara",
             },
             {
-                texto: "De la galería",
+                texto: t.fotos.deLaGaleria,
                 icono: "image-outline",
                 estilo: "secundario",
                 valor: "galeria",
             },
             {
-                texto: "Un documento",
+                texto: t.fotos.unDocumento,
                 icono: "file-document-outline",
                 estilo: "secundario",
                 valor: "documento",
             },
-            { texto: "Cancelar", estilo: "cancelar", valor: null },
+            { texto: t.comun.cancelar, estilo: "cancelar", valor: null },
         ],
     });
     const elegidos =