@acvl/mobile-components 0.0.0-stage → 0.0.1

package/lib/module/navegacion/BarraDePestanas.js

@@ -0,0 +1,162 @@
+"use strict";
+
+import * as Haptics from "expo-haptics";
+import { useEffect, useState } from "react";
+import { useWindowDimensions, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { crearEstilos, usePaleta } from "../tema";
+import BotonDeBarra from "./BotonDeBarra";
+
+/**
+ * Lo que una lista deja libre abajo para que su último renglón no quede debajo de la barra, que
+ * flota encima del contenido: lo que se separa del borde, lo que mide y un margen.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HUECO_DE_LA_BARRA = 140;
+
+// La barra se ajusta al número de pestañas: con una sola no queda un pastillón vacío
+// alrededor del icono, y con cuatro no se sale de la pantalla. Cada pestaña mide lo que
+// pueda hasta `TAB_WIDTH_MAX`, repartiendo el ancho disponible.
+const TAB_WIDTH_MAX = 115;
+const SCREEN_MARGIN = 24;
+const INDICATOR_INSET = 25;
+
+/**
+ * Lo que la barra lee de las props del `tabBar` de `Tabs` (`BottomTabBarProps`). Escrito a mano y
+ * no importado: cada versión de expo-router lo exporta desde otro lado.
+ */
+
+/**
+ * La barra de pestañas de abajo: una pastilla flotante con un icono por pestaña y la elegida
+ * resaltada en rojo. Va en el `tabBar` de `Tabs`:
+ *
+ * ```tsx
+ * <Tabs tabBar={(props) => <BarraDePestanas {...props} iconos={ICONOS} />}>
+ * ```
+ *
+ * Flota encima del contenido: las listas dejan `HUECO_DE_LA_BARRA` abajo.
+ */
+const BarraDePestanas = ({
+  state,
+  navigation,
+  descriptors,
+  iconos,
+  visibles
+}) => {
+  const c = usePaleta();
+  const styles = useStyles();
+  // Sólo el alto se mide; el ancho lo fija el número de pestañas.
+  const [height, setHeight] = useState(0);
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const routes = visibles ? state.routes.filter(route => visibles.includes(route.name)) : state.routes;
+  const tabWidth = Math.min(TAB_WIDTH_MAX, (screenWidth - SCREEN_MARGIN * 2) / routes.length);
+  const indicatorWidth = Math.max(0, tabWidth - INDICATOR_INSET);
+  const indicatorX = index => tabWidth * index + (tabWidth - indicatorWidth) / 2;
+
+  // `state.index` cuenta sobre todas las rutas, incluidas las ocultas. Si la activa no
+  // está en la barra —sólo pasa navegando a mano a una ruta sin permiso— la pastilla se
+  // queda en la primera.
+  const activeIndex = Math.max(0, routes.findIndex(route => route.key === state.routes[state.index]?.key));
+  const onTabbarLayout = e => setHeight(e.nativeEvent.layout.height);
+  const tabPositionX = useSharedValue(indicatorX(activeIndex));
+
+  // La pastilla sigue a la pestaña activa (no al toque): así queda en su sitio cuando
+  // el grupo arranca en una ruta distinta de la primera, o cuando se navega sin tocar
+  // la barra.
+  useEffect(() => {
+    tabPositionX.value = withSpring(indicatorX(activeIndex), {
+      duration: 350
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex, tabWidth, indicatorWidth, tabPositionX]);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateX: tabPositionX.value
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.wrapper,
+    children: /*#__PURE__*/_jsxs(View, {
+      onLayout: onTabbarLayout,
+      style: [styles.tabbar, {
+        width: tabWidth * routes.length
+      }],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [animatedStyle, {
+          position: "absolute",
+          borderRadius: 30,
+          backgroundColor: c.primary,
+          // Nada que pintar hasta la primera medición del alto.
+          height: Math.max(0, height - 15),
+          width: indicatorWidth
+        }]
+      }), routes.map((route, index) => {
+        const isFocused = index === activeIndex;
+        const onPress = () => {
+          const event = navigation.emit({
+            type: "tabPress",
+            target: route.key,
+            canPreventDefault: true
+          });
+
+          // Sólo el de `tabPress` (`canPreventDefault`) trae `defaultPrevented`.
+          const prevenido = "defaultPrevented" in event && event.defaultPrevented;
+          if (!isFocused && !prevenido) {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+            navigation.navigate(route.name, route.params);
+          }
+        };
+        const onLongPress = () => {
+          navigation.emit({
+            type: "tabLongPress",
+            target: route.key
+          });
+        };
+        return /*#__PURE__*/_jsx(BotonDeBarra, {
+          onPress: onPress,
+          onLongPress: onLongPress,
+          isFocused: isFocused,
+          icono: iconos[route.name],
+          etiqueta: descriptors?.[route.key]?.options.title ?? route.name,
+          color: isFocused ? c.sobrePrimario : c.primary
+        }, route.key);
+      })]
+    })
+  });
+};
+const useStyles = crearEstilos(c => ({
+  wrapper: {
+    position: "absolute",
+    bottom: 30,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  },
+  tabbar: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: c.superficie,
+    paddingVertical: 22,
+    borderRadius: 35,
+    // android
+    elevation: 3,
+    // ios
+    shadowColor: c.sombra,
+    shadowOffset: {
+      width: 0,
+      height: 10
+    },
+    shadowRadius: 10,
+    shadowOpacity: 0.1,
+    // En oscuro la sombra no se ve: el borde separa la barra del mapa o la lista de abajo.
+    borderWidth: c.esOscuro ? 1 : 0,
+    borderColor: c.secondaryLighter
+  }
+}));
+export default BarraDePestanas;
+//# sourceMappingURL=BarraDePestanas.js.map

package/lib/module/navegacion/BarraDePestanas.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Haptics","useEffect","useState","useWindowDimensions","View","Animated","useAnimatedStyle","useSharedValue","withSpring","crearEstilos","usePaleta","BotonDeBarra","jsx","_jsx","jsxs","_jsxs","HUECO_DE_LA_BARRA","TAB_WIDTH_MAX","SCREEN_MARGIN","INDICATOR_INSET","BarraDePestanas","state","navigation","descriptors","iconos","visibles","c","styles","useStyles","height","setHeight","width","screenWidth","routes","filter","route","includes","name","tabWidth","Math","min","length","indicatorWidth","max","indicatorX","index","activeIndex","findIndex","key","onTabbarLayout","e","nativeEvent","layout","tabPositionX","value","duration","animatedStyle","transform","translateX","style","wrapper","children","onLayout","tabbar","position","borderRadius","backgroundColor","primary","map","isFocused","onPress","event","emit","type","target","canPreventDefault","prevenido","defaultPrevented","impactAsync","ImpactFeedbackStyle","Light","navigate","params","onLongPress","icono","etiqueta","options","title","color","sobrePrimario","bottom","left","right","alignItems","flexDirection","justifyContent","superficie","paddingVertical","elevation","shadowColor","sombra","shadowOffset","shadowRadius","shadowOpacity","borderWidth","esOscuro","borderColor","secondaryLighter"],"sourceRoot":"../../../src","sources":["navegacion/BarraDePestanas.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/navegacion/BotonDeBarra.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import React, { useEffect } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Una pestaña de `BarraDePestanas`: su icono, que crece un poco al elegirla. */
+const BotonDeBarra = ({
+  onPress,
+  onLongPress,
+  isFocused,
+  icono,
+  etiqueta,
+  color
+}) => {
+  const scale = useSharedValue(0);
+  useEffect(() => {
+    scale.value = withSpring(isFocused ? 1 : 0, {
+      duration: 350
+    });
+  }, [scale, isFocused]);
+  const animatedIconStyle = useAnimatedStyle(() => {
+    const scaleValue = interpolate(scale.value, [0, 1], [1, 1.2]);
+    return {
+      transform: [{
+        scale: scaleValue
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    onLongPress: onLongPress,
+    accessibilityRole: "tab",
+    accessibilityLabel: etiqueta,
+    accessibilityState: {
+      selected: isFocused
+    },
+    style: styles.tabbarItem,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: animatedIconStyle,
+      children: icono ? /*#__PURE__*/_jsx(MaterialIcons, {
+        name: icono,
+        size: 24,
+        color: color
+      }) : null
+    })
+  });
+};
+const styles = StyleSheet.create({
+  tabbarItem: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+export default BotonDeBarra;
+//# sourceMappingURL=BotonDeBarra.js.map

package/lib/module/navegacion/BotonDeBarra.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MaterialIcons","React","useEffect","Pressable","StyleSheet","Animated","interpolate","useAnimatedStyle","useSharedValue","withSpring","jsx","_jsx","BotonDeBarra","onPress","onLongPress","isFocused","icono","etiqueta","color","scale","value","duration","animatedIconStyle","scaleValue","transform","accessibilityRole","accessibilityLabel","accessibilityState","selected","style","styles","tabbarItem","children","View","name","size","create","flex","justifyContent","alignItems"],"sourceRoot":"../../../src","sources":["navegacion/BotonDeBarra.tsx"],"mappings":";;AAAA,OAAOA,aAAa,MAAM,kCAAkC;AAC5D,OAAOC,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,SAAS,EAAEC,UAAU,QAAQ,cAAc;AACpD,OAAOC,QAAQ,IACXC,WAAW,EACXC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACP,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAajC;AACA,MAAMC,YAAY,GAAGA,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAa,CAAC,KAAK;EACzF,MAAMC,KAAK,GAAGX,cAAc,CAAC,CAAC,CAAC;EAE/BN,SAAS,CAAC,MAAM;IACZiB,KAAK,CAACC,KAAK,GAAGX,UAAU,CAACM,SAAS,GAAG,CAAC,GAAG,CAAC,EAAE;MAAEM,QAAQ,EAAE;IAAI,CAAC,CAAC;EAClE,CAAC,EAAE,CAACF,KAAK,EAAEJ,SAAS,CAAC,CAAC;EAEtB,MAAMO,iBAAiB,GAAGf,gBAAgB,CAAC,MAAM;IAC7C,MAAMgB,UAAU,GAAGjB,WAAW,CAACa,KAAK,CAACC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC7D,OAAO;MACHI,SAAS,EAAE,CAAC;QAAEL,KAAK,EAAEI;MAAW,CAAC;IACrC,CAAC;EACL,CAAC,CAAC;EAEF,oBACIZ,IAAA,CAACR,SAAS;IACNU,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBW,iBAAiB,EAAC,KAAK;IACvBC,kBAAkB,EAAET,QAAS;IAC7BU,kBAAkB,EAAE;MAAEC,QAAQ,EAAEb;IAAU,CAAE;IAC5Cc,KAAK,EAAEC,MAAM,CAACC,UAAW;IAAAC,QAAA,eAEzBrB,IAAA,CAACN,QAAQ,CAAC4B,IAAI;MAACJ,KAAK,EAAEP,iBAAkB;MAAAU,QAAA,EACnChB,KAAK,gBAAGL,IAAA,CAACX,aAAa;QAACkC,IAAI,EAAElB,KAAM;QAACmB,IAAI,EAAE,EAAG;QAACjB,KAAK,EAAEA;MAAM,CAAE,CAAC,GAAG;IAAI,CAC3D;EAAC,CACT,CAAC;AAEpB,CAAC;AAED,MAAMY,MAAM,GAAG1B,UAAU,CAACgC,MAAM,CAAC;EAC7BL,UAAU,EAAE;IACRM,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAEF,eAAe3B,YAAY","ignoreList":[]}

package/lib/module/navegacion/encabezado.js

@@ -0,0 +1,103 @@
+"use strict";
+
+import React from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Logo } from "../componentes/Logo";
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+
+/**
+ * Alto del header por debajo de la barra de estado. Iguala el de `CabeceraEmpujada` (10 de
+ * padding + la fila de 45 del botón de atrás + 13), y se suma al inset porque `headerStyle.height`
+ * de React Navigation incluye la franja de la barra de estado: un alto fijo salía bien en iOS
+ * —inset grande— y desproporcionado en Android.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ALTO_DEL_ENCABEZADO = 76;
+
+/**
+ * El título del header de las pestañas: un rótulo arriba (quién entró, la yarda, el nombre de la
+ * app) y el de la pestaña en rojo.
+ */
+export function TituloDelEncabezado({
+  eyebrow,
+  children
+}) {
+  const styles = useStyles();
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.eyebrow,
+      children: eyebrow.toUpperCase()
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      adjustsFontSizeToFit: true,
+      style: styles.titulo,
+      children: children
+    })]
+  });
+}
+
+/**
+ * El header de las pestañas de una app, igual en todas: la bola a la izquierda, el rótulo y el
+ * título, y a la derecha lo que la app ponga (sus pendientes, el avatar). Va en el `screenOptions`
+ * de `Tabs`:
+ *
+ * ```tsx
+ * const encabezado = useOpcionesDelEncabezado({ eyebrow: "Operador", derecha: <BotonDeAvatar … /> });
+ * <Tabs screenOptions={encabezado} tabBar={…}>
+ * ```
+ */
+export function useOpcionesDelEncabezado({
+  eyebrow,
+  derecha
+}) {
+  const c = usePaleta();
+  const styles = useStyles();
+  const insets = useSafeAreaInsets();
+  return {
+    headerShadowVisible: false,
+    headerStyle: {
+      height: insets.top + ALTO_DEL_ENCABEZADO,
+      backgroundColor: c.superficie
+    },
+    headerTitleAlign: "left",
+    headerTitle: props => /*#__PURE__*/_jsx(TituloDelEncabezado, {
+      eyebrow: eyebrow,
+      children: props.children
+    }),
+    headerLeft: () => /*#__PURE__*/_jsx(View, {
+      style: styles.izquierda,
+      children: /*#__PURE__*/_jsx(Logo, {})
+    }),
+    headerRight: derecha ? () => /*#__PURE__*/_jsx(View, {
+      style: styles.derecha,
+      children: derecha
+    }) : undefined,
+    tabBarHideOnKeyboard: true
+  };
+}
+const useStyles = crearEstilos(c => ({
+  // Con la letra mínima (`etiqueta`): a 11 el nombre no se leía.
+  eyebrow: {
+    ...renglon(tipografia.etiqueta),
+    fontWeight: "700",
+    letterSpacing: 1.4,
+    color: c.eyebrow
+  },
+  titulo: {
+    fontSize: 30,
+    fontWeight: "800",
+    color: c.primary
+  },
+  izquierda: {
+    marginLeft: 20
+  },
+  derecha: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginRight: 20
+  }
+}));
+//# sourceMappingURL=encabezado.js.map

package/lib/module/navegacion/encabezado.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","useSafeAreaInsets","Logo","Text","crearEstilos","renglon","tipografia","usePaleta","jsx","_jsx","jsxs","_jsxs","ALTO_DEL_ENCABEZADO","TituloDelEncabezado","eyebrow","children","styles","useStyles","style","toUpperCase","numberOfLines","adjustsFontSizeToFit","titulo","useOpcionesDelEncabezado","derecha","c","insets","headerShadowVisible","headerStyle","height","top","backgroundColor","superficie","headerTitleAlign","headerTitle","props","headerLeft","izquierda","headerRight","undefined","tabBarHideOnKeyboard","etiqueta","fontWeight","letterSpacing","color","fontSize","primary","marginLeft","flexDirection","alignItems","gap","marginRight"],"sourceRoot":"../../../src","sources":["navegacion/encabezado.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/pantallas/PantallaDeAcceso.js

@@ -0,0 +1,195 @@
+"use strict";
+
+import * as Haptics from "expo-haptics";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useWindowDimensions, View } from "react-native";
+import { KeyboardAvoidingView } from "react-native-keyboard-controller";
+import { Button, Card, Chip, Snackbar } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { LogoCompleto } from "../componentes/Logo";
+import { setErrors } from "../formularios/errores";
+import TextoDeAccesoControlado from "../formularios/TextoDeAccesoControlado";
+import { crearEstilos, usePaleta } from "../tema";
+import { Text } from "../texto";
+
+// Mismo corte que ContenidoDePantalla: de aquí para abajo es teléfono.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ANCHO_DE_TABLETA = 700;
+
+/** Lo que se escribe, con los nombres del servidor: así `setErrors` lo cuelga de su campo. */
+
+/**
+ * Lo que pasó al intentar entrar: `null` si entró (la app ya guardó la sesión y su layout la
+ * lleva adentro), o lo que se le dice a quien escribe.
+ */
+
+/**
+ * La pantalla de entrada de las apps: el logo con el nombre de la app, usuario, contraseña e
+ * «Iniciar Sesión», y la versión abajo. En una tableta va en una tarjeta centrada; en un teléfono,
+ * directo sobre el fondo.
+ *
+ * Lo de cada app es `onEntrar`: llama a su login y dice qué contestar a cada respuesta (una cuenta
+ * deshabilitada, una que no tiene acceso a esta app). El aviso sale **arriba**, porque el teclado
+ * tapa uno anclado abajo, y dura lo que tarda en leerse.
+ */
+export default function PantallaDeAcceso({
+  nombre,
+  version,
+  onEntrar
+}) {
+  const c = usePaleta();
+  const styles = useStyles();
+  const insets = useSafeAreaInsets();
+  const {
+    width
+  } = useWindowDimensions();
+  const form = useForm({
+    defaultValues: {
+      username: "",
+      password: ""
+    }
+  });
+  const [entrando, setEntrando] = useState(false);
+  const [aviso, setAviso] = useState(null);
+  const entrar = form.handleSubmit(async datos => {
+    setEntrando(true);
+    try {
+      const resultado = await onEntrar(datos);
+      if (!resultado) {
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        return;
+      }
+      Haptics.notificationAsync(resultado.tono === "aviso" ? Haptics.NotificationFeedbackType.Warning : Haptics.NotificationFeedbackType.Error);
+      if (resultado.errorDelServidor) setErrors(form, resultado.errorDelServidor);
+      setAviso(resultado.mensaje);
+    } catch {
+      // `onEntrar` contesta lo que conoce; lo que se le escape no deja el botón cargando.
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      setAviso("No se pudo iniciar sesión. Intente de nuevo.");
+    } finally {
+      setEntrando(false);
+    }
+  });
+  const contenido = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.marca,
+      children: [/*#__PURE__*/_jsx(LogoCompleto, {}), /*#__PURE__*/_jsx(Text, {
+        style: styles.nombre,
+        children: nombre
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.campos,
+      children: [/*#__PURE__*/_jsx(TextoDeAccesoControlado, {
+        name: "username",
+        control: form.control,
+        etiqueta: "Usuario",
+        entrada: {
+          autoCapitalize: "none"
+        }
+      }), /*#__PURE__*/_jsx(TextoDeAccesoControlado, {
+        name: "password",
+        control: form.control,
+        etiqueta: "Contrase\xF1a",
+        contrasena: true,
+        entrada: {
+          autoCapitalize: "none"
+        }
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      mode: "contained",
+      loading: entrando,
+      disabled: entrando,
+      onPress: entrar,
+      style: styles.boton,
+      children: "Iniciar Sesi\xF3n"
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: styles.centro,
+      behavior: "padding",
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.columna,
+        children: width > ANCHO_DE_TABLETA ? /*#__PURE__*/_jsx(Card, {
+          style: styles.card,
+          children: /*#__PURE__*/_jsx(Card.Content, {
+            children: contenido
+          })
+        }) : contenido
+      })
+    }), version ? /*#__PURE__*/_jsx(View, {
+      style: styles.version,
+      children: /*#__PURE__*/_jsxs(Chip, {
+        compact: true,
+        textStyle: {
+          color: c.secondary,
+          fontSize: 11
+        },
+        style: {
+          backgroundColor: c.superficieTenue
+        },
+        children: ["v ", version]
+      })
+    }) : null, /*#__PURE__*/_jsx(Snackbar, {
+      visible: aviso !== null,
+      onDismiss: () => setAviso(null)
+      // Un aviso largo se queda lo que tarda en leerse.
+      ,
+      duration: Math.max(2400, (aviso?.length ?? 0) * 60),
+      wrapperStyle: {
+        top: insets.top + 12,
+        bottom: undefined
+      },
+      children: aviso
+    })]
+  });
+}
+const useStyles = crearEstilos(c => ({
+  root: {
+    flex: 1,
+    backgroundColor: c.fondo
+  },
+  centro: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 24,
+    backgroundColor: c.fondo
+  },
+  columna: {
+    width: "100%",
+    maxWidth: 400,
+    alignSelf: "center"
+  },
+  card: {
+    backgroundColor: c.superficie
+  },
+  marca: {
+    alignItems: "center",
+    marginBottom: 20
+  },
+  nombre: {
+    fontSize: 15,
+    color: c.primary,
+    fontWeight: "bold",
+    fontStyle: "italic",
+    paddingHorizontal: 3
+  },
+  campos: {
+    gap: 15,
+    paddingBottom: 20
+  },
+  boton: {
+    marginTop: 10,
+    borderRadius: 15
+  },
+  version: {
+    position: "absolute",
+    bottom: 50,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  }
+}));
+//# sourceMappingURL=PantallaDeAcceso.js.map

package/lib/module/pantallas/PantallaDeAcceso.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Haptics","useState","useForm","useWindowDimensions","View","KeyboardAvoidingView","Button","Card","Chip","Snackbar","useSafeAreaInsets","LogoCompleto","setErrors","TextoDeAccesoControlado","crearEstilos","usePaleta","Text","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ANCHO_DE_TABLETA","PantallaDeAcceso","nombre","version","onEntrar","c","styles","useStyles","insets","width","form","defaultValues","username","password","entrando","setEntrando","aviso","setAviso","entrar","handleSubmit","datos","resultado","notificationAsync","NotificationFeedbackType","Success","tono","Warning","Error","errorDelServidor","mensaje","contenido","children","style","marca","campos","name","control","etiqueta","entrada","autoCapitalize","contrasena","mode","loading","disabled","onPress","boton","root","centro","behavior","columna","card","Content","compact","textStyle","color","secondary","fontSize","backgroundColor","superficieTenue","visible","onDismiss","duration","Math","max","length","wrapperStyle","top","bottom","undefined","flex","fondo","justifyContent","padding","maxWidth","alignSelf","superficie","alignItems","marginBottom","primary","fontWeight","fontStyle","paddingHorizontal","gap","paddingBottom","marginTop","borderRadius","position","left","right"],"sourceRoot":"../../../src","sources":["pantallas/PantallaDeAcceso.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/pantallas/PantallaDeEdicion.js

@@ -0,0 +1,121 @@
+"use strict";
+
+import React from "react";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import { KeyboardAvoidingView } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import BotonGrande from "../componentes/BotonGrande";
+import CabeceraEmpujada from "../componentes/CabeceraEmpujada";
+import EstadoVacio from "../componentes/EstadoVacio";
+import Nota from "../componentes/Nota";
+import { mensajeDeError } from "../formularios/errores";
+import { crearEstilos, usePaleta } from "../tema";
+
+/**
+ * El armazón de una pantalla que edita algo (un viaje, un tracto, una caja, un operador). Dos
+ * partes, porque el formulario nace cuando ya llegó lo que edita (sus valores iniciales salen de
+ * ahí):
+ *
+ * - `EsperaDeEdicion`: lo que se ve antes: sin permiso, cargando o si falló, con «Reintentar».
+ * - `FormularioDeEdicion`: la cabecera, los campos en un scroll que esquiva el teclado, el error
+ *   del último intento y «Guardar» abajo, fijo.
+ */
+
+/** Lo que la espera lee de un `use…Query` de RTK Query. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EsperaDeEdicion({
+  eyebrow,
+  puede,
+  sinPermiso,
+  consulta,
+  queEs
+}) {
+  const c = usePaleta();
+  const styles = useStyles();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(CabeceraEmpujada, {
+      eyebrow: eyebrow,
+      titulo: "\u2026"
+    }), !puede ? /*#__PURE__*/_jsx(EstadoVacio, {
+      icono: "lock-outline",
+      titulo: "No tienes permiso",
+      texto: sinPermiso
+    }) : consulta.isError ? /*#__PURE__*/_jsx(EstadoVacio, {
+      icono: "cloud-alert",
+      titulo: `No se pudo cargar ${queEs}`,
+      texto: mensajeDeError(consulta.error, "Revisa la señal e intenta de nuevo."),
+      children: /*#__PURE__*/_jsx(BotonGrande, {
+        icono: "refresh",
+        modo: "contorno",
+        onPress: consulta.refetch,
+        children: "Reintentar"
+      })
+    }) : /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: c.primary,
+      style: styles.cargando
+    })]
+  });
+}
+export function FormularioDeEdicion({
+  eyebrow,
+  titulo,
+  error,
+  guardando,
+  onGuardar,
+  textoDeGuardar = "Guardar",
+  children
+}) {
+  const styles = useStyles();
+  const insets = useSafeAreaInsets();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(CabeceraEmpujada, {
+      eyebrow: eyebrow,
+      titulo: titulo
+    }), /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+      behavior: "padding",
+      style: styles.flex,
+      children: [/*#__PURE__*/_jsxs(ScrollView, {
+        contentContainerStyle: styles.contenido,
+        keyboardShouldPersistTaps: "handled",
+        children: [children, error ? /*#__PURE__*/_jsx(Nota, {
+          tono: "aviso",
+          texto: error
+        }) : null]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.pie, {
+          paddingBottom: insets.bottom + 16
+        }],
+        children: /*#__PURE__*/_jsx(BotonGrande, {
+          icono: "check",
+          onPress: onGuardar,
+          cargando: guardando,
+          children: guardando ? "Guardando…" : textoDeGuardar
+        })
+      })]
+    })]
+  });
+}
+const useStyles = crearEstilos(c => ({
+  root: {
+    flex: 1,
+    backgroundColor: c.fondo
+  },
+  flex: {
+    flex: 1
+  },
+  cargando: {
+    marginTop: 24
+  },
+  contenido: {
+    padding: 20,
+    gap: 12
+  },
+  pie: {
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    backgroundColor: c.superficie
+  }
+}));
+//# sourceMappingURL=PantallaDeEdicion.js.map