@acvl/mobile-components 0.0.0-stage → 0.0.2

package/lib/typescript/src/pantallas/PantallaDeHistorial.d.ts

@@ -0,0 +1,65 @@
+import React from "react";
+/**
+ * Un movimiento de la bitácora de un registro, como lo responde cualquier endpoint `historial/`
+ * de los backends de ACV (`BaseHistorySerializer`): el registro **entero** como quedó, con quién,
+ * cuándo y qué campos cambiaron.
+ */
+export interface EventoDeHistorial {
+    /** Ya redactado por el backend: «Actualización - Concepto de Orden de envío». */
+    history_type: string;
+    /** El nombre completo de quien lo hizo; nulo si lo movió el sistema. */
+    history_user: string | null;
+    /** ISO en UTC. */
+    history_date: string;
+    /** Los que cambiaron en este paso; nulo en la creación, que no tiene contra qué compararse. */
+    campos_con_cambios: string[] | null;
+    [campo: string]: unknown;
+}
+/**
+ * Lo que devuelve cualquier endpoint `historial/`: la línea de tiempo, del más nuevo al más viejo,
+ * y aparte cómo se llama cada campo. Las etiquetas son además el filtro de qué se pinta: un campo
+ * sin etiqueta es de los internos de la bitácora.
+ */
+export interface Historial {
+    history: EventoDeHistorial[];
+    labels: Record<string, string>;
+}
+/**
+ * Un movimiento.
+ *
+ * De entrada enseña sólo lo que cambió en ese paso: el evento trae el registro entero como quedó, y
+ * en un teléfono treinta campos por tarjeta esconden el que importa. El resto está a un toque, que
+ * es donde se va a buscar el dato que no se movió.
+ */
+export declare function TarjetaDeEvento({ evento, labels, }: {
+    evento: EventoDeHistorial;
+    labels: Record<string, string>;
+}): React.JSX.Element;
+/** Lo que la pantalla lee de un `use…Query` de RTK Query. */
+interface ConsultaDeHistorial {
+    data?: Historial;
+    isLoading: boolean;
+    isFetching: boolean;
+    isError: boolean;
+    refetch: () => unknown;
+}
+/**
+ * La bitácora de un registro: quién lo movió, cuándo y qué le cambió. Es el panel de historial del
+ * portal, que allá se acopla al costado de la ficha; en el teléfono no hay costado, así que es una
+ * pantalla empujada a la que se llega desde las acciones de la ficha.
+ *
+ * Quien la usa pone la consulta (de dónde se pide, con su permiso). Conviene pedirla con
+ * `refetchOnMountOrArgChange`: se abre justo después de mover algo, y servir la caché enseñaría un
+ * historial sin el movimiento que se viene a comprobar.
+ *
+ * En varios registros el backend mezcla en una sola línea de tiempo el registro y lo que cuelga de
+ * él (una orden con sus conceptos, un embarque con su transporte); por eso cada tarjeta dice de qué
+ * registro habla.
+ */
+export default function PantallaDeHistorial({ eyebrow, consulta, }: {
+    /** De qué registro es: «Recibo R-0012». */
+    eyebrow: string;
+    consulta: ConsultaDeHistorial;
+}): React.JSX.Element;
+export {};
+//# sourceMappingURL=PantallaDeHistorial.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PantallaDeHistorial.d.ts","sourceRoot":"","sources":["../../../../src/pantallas/PantallaDeHistorial.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAC9B,iFAAiF;IACjF,YAAY,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,kBAAkB;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,+FAA+F;IAC/F,kBAAkB,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACpC,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACtB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAoDD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,MAAM,GACT,EAAE;IACC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,qBAqEA;AAED,6DAA6D;AAC7D,UAAU,mBAAmB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EACxC,OAAO,EACP,QAAQ,GACX,EAAE;IACC,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,mBAAmB,CAAC;CACjC,qBAyDA"}

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

@@ -0,0 +1,19 @@
+import React from "react";
+/**
+ * El perfil de una app, igual en todas: quién entró, cómo se ve la app y cerrar sesión. Va
+ * empujado encima de las pestañas (lo abre el avatar del header). Necesita `ProveedorDeTema`.
+ *
+ * Lo propio de cada app va por props: quién es, qué pasa al cerrar sesión (avisar si hay envíos
+ * pendientes, confirmar) y, en `children`, lo que vaya al final (la versión instalada).
+ */
+export default function PantallaDePerfil({ rotulo, nombre, subtitulo, onCerrarSesion, saliendo, children, }: {
+    /** Qué tipo de sesión es («Operador», «Guardia de caseta»): el rótulo de la cabecera. */
+    rotulo: string;
+    nombre?: string | null;
+    /** El usuario, el número de empleado. */
+    subtitulo?: string | null;
+    onCerrarSesion: () => void;
+    saliendo?: boolean;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=PantallaDePerfil.d.ts.map

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

@@ -0,0 +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"}

package/lib/typescript/src/tema/ProveedorDeTema.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+/**
+ * Cómo quiere ver la app quien la usa: **igual que el teléfono** (por omisión), o siempre clara, o
+ * siempre oscura. Es del teléfono y no de la cuenta: sobrevive al cerrar sesión.
+ */
+export type PreferenciaDeTema = "sistema" | "claro" | "oscuro";
+/**
+ * Dónde guarda cada app la preferencia (SecureStore, AsyncStorage…). `leer` puede devolver
+ * cualquier cosa: lo que no sea una preferencia válida cuenta como `"sistema"`.
+ */
+export interface AlmacenDelTema {
+    leer: () => Promise<string | null | undefined>;
+    guardar: (preferencia: PreferenciaDeTema) => Promise<unknown>;
+}
+type ContextoDelTema = [PreferenciaDeTema, (preferencia: PreferenciaDeTema) => void];
+/**
+ * El tema de la app: lee la preferencia guardada, se la impone a lo nativo, y da el tema de Paper,
+ * la barra de estado y el fondo de la raíz de ahora. Va en el layout raíz, por encima de todo lo
+ * que pinta.
+ *
+ * **No pinta nada hasta leer la preferencia**: así no se asoma el claro un momento en quien eligió
+ * el oscuro. Leerla es una consulta local, no se nota.
+ */
+export declare function ProveedorDeTema({ almacen, children, }: {
+    /** Sin almacén, la preferencia dura lo que dure la app abierta. */
+    almacen?: AlmacenDelTema;
+    children: React.ReactNode;
+}): React.JSX.Element | null;
+/** La preferencia del tema y cómo cambiarla (el perfil). Sólo dentro de `ProveedorDeTema`. */
+export declare function usePreferenciaDeTema(): ContextoDelTema;
+export {};
+//# sourceMappingURL=ProveedorDeTema.d.ts.map

package/lib/typescript/src/tema/ProveedorDeTema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProveedorDeTema.d.ts","sourceRoot":"","sources":["../../../../src/tema/ProveedorDeTema.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAI/D;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC/C,OAAO,EAAE,CAAC,WAAW,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACjE;AAiDD,KAAK,eAAe,GAAG,CAAC,iBAAiB,EAAE,CAAC,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC,CAAC;AAIrF;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC5B,OAAO,EACP,QAAQ,GACX,EAAE;IACC,mEAAmE;IACnE,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,4BAmDA;AAED,8FAA8F;AAC9F,wBAAgB,oBAAoB,IAAI,eAAe,CAItD"}

package/lib/typescript/src/tema/estilos.d.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from "react-native";
+import { type Paleta } from "./paleta";
+/**
+ * Si la app se ve oscura. Lee `useColorScheme` y no un contexto: `ProveedorDeTema` le impone la
+ * preferencia a toda la app nativa (`Appearance.setColorScheme`), así que contesta la elegida, o la
+ * del teléfono con «igual que el teléfono». Y así sirve también fuera de los proveedores, en la
+ * pantalla de error del layout raíz.
+ */
+export declare const useEsOscuro: () => boolean;
+/** Los colores de ahora (`paleta.ts`). */
+export declare const usePaleta: () => Paleta;
+/**
+ * Hojas de estilo que dependen del tema. Se declaran igual que un `StyleSheet.create`, pero con la
+ * paleta como argumento, y dan un hook:
+ *
+ * ```ts
+ * const useStyles = crearEstilos((c) => ({ caja: { backgroundColor: c.superficie } }));
+ * // en el componente:
+ * const styles = useStyles();
+ * ```
+ *
+ * Cada hoja se crea una vez por paleta y se guarda: cambiar de tema no la vuelve a crear en cada
+ * render.
+ */
+export declare function crearEstilos<T extends StyleSheet.NamedStyles<T>>(fabrica: (c: Paleta) => T): () => T;
+/**
+ * El fondo de la raíz nativa (lo que se ve detrás de una transición) sigue al tema: sin esto, al
+ * empujar una pantalla en oscuro se asomaba un destello blanco.
+ */
+export declare function useFondoDeLaRaiz(fondo: string): void;
+//# sourceMappingURL=estilos.d.ts.map

package/lib/typescript/src/tema/estilos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"estilos.d.ts","sourceRoot":"","sources":["../../../../src/tema/estilos.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC;AAC1D,OAAO,EAA+B,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAEpE;;;;;GAKG;AACH,eAAO,MAAM,WAAW,QAAO,OAAsC,CAAC;AAEtE,0CAA0C;AAC1C,eAAO,MAAM,SAAS,QAAO,MAAwD,CAAC;AAEtF;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,SAEzD,CAAC,CASlC;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,QAI7C"}

package/lib/typescript/src/tema/fuentes.d.ts

@@ -0,0 +1,20 @@
+/**
+ * La tipografía de iOS es San Francisco —lo que React Native llama `System`— y no se puede
+ * llevar a Android: la licencia de Apple la limita a sus plataformas. Android se quedaba con
+ * `sans-serif` (Roboto), de ahí que las dos versiones no se parecieran.
+ *
+ * Inter es el sustituto libre (OFL) más cercano a San Francisco: misma altura de x, mismo
+ * aire de fuente de interfaz. Así que Android va con Inter e iOS se queda como está.
+ *
+ * Los seis cortes —de 400 a 900, que son los pesos que usan las pantallas— vienen en
+ * `assets/fonts/` de este paquete y **cada app los registra** como una sola familia en su
+ * `app.json` (plugin de expo-font, sección `android.fonts`; ver el README). Al declarar cada peso
+ * con su archivo, `fontWeight: "600"` toma el SemiBold de verdad en vez de una negrita sintética.
+ * Tocar esa lista obliga a reconstruir el binario, no basta con recargar.
+ */
+export declare const fontFamily: string | undefined;
+/** Familia lista para mezclar en un `style`; `null` donde vale la del sistema. */
+export declare const fuenteBase: {
+    fontFamily: string;
+} | null;
+//# sourceMappingURL=fuentes.d.ts.map

package/lib/typescript/src/tema/fuentes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuentes.d.ts","sourceRoot":"","sources":["../../../../src/tema/fuentes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,oBAA4D,CAAC;AAEpF,kFAAkF;AAClF,eAAO,MAAM,UAAU;;QAAqC,CAAC"}

package/lib/typescript/src/tema/index.d.ts

@@ -0,0 +1,6 @@
+export { crearEstilos, useEsOscuro, useFondoDeLaRaiz, usePaleta } from "./estilos";
+export { fontFamily, fuenteBase } from "./fuentes";
+export { PALETA_CLARA, PALETA_OSCURA, type Paleta } from "./paleta";
+export { ProveedorDeTema, usePreferenciaDeTema, type AlmacenDelTema, type PreferenciaDeTema, } from "./ProveedorDeTema";
+export { renglon, tipografia } from "./tipografia";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/tema/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tema/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,EACH,eAAe,EACf,oBAAoB,EACpB,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/typescript/src/tema/paleta.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Los colores de las apps, **uno por cosa y no por tono**: el fondo, la superficie de una tarjeta,
+ * el texto, el aviso ámbar. Cada pantalla los toma de aquí (`usePaleta`, `crearEstilos`) y no
+ * escribe hexadecimales: así el modo oscuro es cambiar de paleta, no revisar cada pantalla.
+ *
+ * Los nombres `primary…`/`secondary…` son los del `colors` que traían las apps antes de la paleta,
+ * con el mismo sentido. Lo oscuro sigue al portal (`@acvl/frontend-components`, `v1/theme`): fondo
+ * `#121212`, papel `#1e1e1e` y el rojo más claro `#ff4a57`, que sobre negro se lee mejor que el de
+ * la marca.
+ *
+ * Lo que se pinta dentro de un mapa (los colores de estado de una flota, un pin) no sale de aquí:
+ * tiene que leerse igual sobre claro, oscuro y satélite, y lo escoge cada app.
+ */
+export interface Paleta {
+    esOscuro: boolean;
+    /** El fondo de la pantalla, detrás de las tarjetas. */
+    fondo: string;
+    /** Una tarjeta, un campo, una hoja, el header y la barra de pestañas. */
+    superficie: string;
+    /** Lo que va encima de una superficie y se tiene que distinguir de ella (un campo apagado). */
+    superficieTenue: string;
+    /** El texto normal. */
+    texto: string;
+    /** El texto que va sobre el rojo (un botón lleno, el chip «En curso»). */
+    sobrePrimario: string;
+    /** El velo detrás de un diálogo. */
+    velo: string;
+    /** La sombra: en oscuro casi no se ve, así que el borde hace su trabajo. */
+    sombra: string;
+    primary: string;
+    primaryLight: string;
+    primaryLighter: string;
+    primaryDark: string;
+    /** El fondo de lo elegido. */
+    primaryWash: string;
+    /** El texto secundario. */
+    secondary: string;
+    /** El texto tenue: un placeholder, un icono apagado. */
+    secondaryLight: string;
+    /** Los bordes y separadores. */
+    secondaryLighter: string;
+    /** El gris fuerte: un título gris, el texto de un estado vacío. */
+    secondaryDark: string;
+    secondaryText: string;
+    /** El rótulo arriba del título del header. */
+    eyebrow: string;
+    /**
+     * Lo que pide atención sin ser error: pausas, pendientes, avisos. `acento` es el ámbar medio de
+     * un borde o una barra; `sobreFuerte`, la letra encima de un relleno `fuerte`.
+     */
+    aviso: {
+        fondo: string;
+        tinta: string;
+        fuerte: string;
+        acento: string;
+        sobreFuerte: string;
+        borde: string;
+    };
+    /** Lo cumplido. */
+    exito: {
+        fondo: string;
+        tinta: string;
+    };
+    /** Lo informativo. */
+    info: {
+        fondo: string;
+        tinta: string;
+    };
+    /** Lo que salió mal. */
+    error: {
+        fondo: string;
+        tinta: string;
+    };
+    /**
+     * Un escalón más de un avance que ya usa los otros: en wms, una orden de envío facturada
+     * (todavía no pagada, que es el verde) o un recibo entregado a medias. Es el morado que el
+     * portal le da a la orden de envío.
+     */
+    morado: {
+        fondo: string;
+        tinta: string;
+    };
+}
+export declare const PALETA_CLARA: Paleta;
+export declare const PALETA_OSCURA: Paleta;
+//# sourceMappingURL=paleta.d.ts.map

package/lib/typescript/src/tema/paleta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paleta.d.ts","sourceRoot":"","sources":["../../../../src/tema/paleta.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,OAAO,CAAC;IAElB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,+FAA+F;IAC/F,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,aAAa,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAC;IAGf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,cAAc,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mEAAmE;IACnE,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,mBAAmB;IACnB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,sBAAsB;IACtB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,wBAAwB;IACxB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC;;;;OAIG;IACH,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C;AAED,eAAO,MAAM,YAAY,EAAE,MAkC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAkC3B,CAAC"}

package/lib/typescript/src/tema/tipografia.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Los tamaños de letra de las apps. Son grandes a propósito: quien las usa lee de pie, con prisa, a
+ * veces con sol y sin lentes, y la letra chica es donde batalla. **Nada baja de `etiqueta`.** Una
+ * pantalla nueva toma de aquí en lugar de inventar su número.
+ */
+export declare const tipografia: {
+    /** La acción que toca completar: lo único que tiene que leerse de un vistazo. */
+    destacado: number;
+    /** El folio y lo que identifica la pantalla. */
+    titulo: number;
+    /** El nombre de un paso, el cliente: lo que se lee primero dentro de una tarjeta. */
+    subtitulo: number;
+    /** El texto normal: valores, instrucciones, el lugar. */
+    cuerpo: number;
+    /** Lo que acompaña: direcciones, el siguiente paso, horas. */
+    secundario: number;
+    /** Rótulos en mayúsculas, chips y pestañas. El mínimo. */
+    etiqueta: number;
+};
+/**
+ * Tamaño y alto de renglón explícito para un texto que lleva un icono al lado. `IconoDeRenglon`
+ * usa el mismo alto para centrarse contra el primer renglón; los dos crecen con la escala de
+ * letra del sistema.
+ */
+export declare const renglon: (fontSize: number) => {
+    fontSize: number;
+    lineHeight: number;
+};
+//# sourceMappingURL=tipografia.d.ts.map

package/lib/typescript/src/tema/tipografia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tipografia.d.ts","sourceRoot":"","sources":["../../../../src/tema/tipografia.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,UAAU;IACnB,iFAAiF;;IAEjF,gDAAgD;;IAEhD,qFAAqF;;IAErF,yDAAyD;;IAEzD,8DAA8D;;IAE9D,0DAA0D;;CAE7D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,UAAU,MAAM;;;CAGtC,CAAC"}

package/lib/typescript/src/texto.d.ts

@@ -0,0 +1,16 @@
+import { Text as RNText, TextInput as RNTextInput, type TextInputProps, type TextProps } from "react-native";
+/**
+ * `Text` y `TextInput` con la tipografía de la app ya puesta.
+ *
+ * React Native no tiene una fuente por defecto para todo el árbol —y `defaultProps` dejó de
+ * aplicarse a componentes de función en React 19—, así que la familia se inyecta aquí y las
+ * pantallas importan estos dos en lugar de los de "react-native". Los componentes de Paper no
+ * pasan por aquí: esos leen la escala tipográfica del tema (`ProveedorDeTema`).
+ *
+ * La familia va primero en el arreglo de estilos para que cualquier `style` de quien lo use
+ * la pueda pisar. **También el color del texto** (`c.texto`): el `Text` de React Native es negro
+ * por omisión, y en el modo oscuro cada texto sin color propio desaparecía sobre el fondo.
+ */
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<RNTextInput>>;
+//# sourceMappingURL=texto.d.ts.map

package/lib/typescript/src/texto.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"texto.d.ts","sourceRoot":"","sources":["../../../src/texto.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,IAAI,IAAI,MAAM,EACd,SAAS,IAAI,WAAW,EACxB,KAAK,cAAc,EACnB,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,IAAI,8FAMf,CAAC;AAEH,eAAO,MAAM,SAAS,wGAarB,CAAC"}

package/package.json

@@ -1,6 +1,141 @@
 {
-  "name": "@acvl/mobile-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@acvl/mobile-components",
+    "version": "0.0.2",
+    "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": {
+        "url": "https://github.com/ACV-Logistics/acv-mobile-components/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ACV-Logistics/acv-mobile-components.git"
+    },
+    "license": "MIT",
+    "author": "mario.aftimos",
+    "source": "./src/index.ts",
+    "main": "./lib/module/index.js",
+    "types": "./lib/typescript/src/index.d.ts",
+    "exports": {
+        ".": {
+            "source": "./src/index.ts",
+            "types": "./lib/typescript/src/index.d.ts",
+            "default": "./lib/module/index.js"
+        },
+        "./camara": {
+            "source": "./src/camara/index.ts",
+            "types": "./lib/typescript/src/camara/index.d.ts",
+            "default": "./lib/module/camara/index.js"
+        },
+        "./fotos": {
+            "source": "./src/fotos/index.ts",
+            "types": "./lib/typescript/src/fotos/index.d.ts",
+            "default": "./lib/module/fotos/index.js"
+        },
+        "./hoja": {
+            "source": "./src/hoja/index.ts",
+            "types": "./lib/typescript/src/hoja/index.d.ts",
+            "default": "./lib/module/hoja/index.js"
+        },
+        "./assets/*": "./assets/*",
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "src",
+        "lib",
+        "assets",
+        "!**/__tests__"
+    ],
+    "scripts": {
+        "build": "bob build",
+        "typecheck": "tsc --noEmit",
+        "test": "vitest run",
+        "format": "prettier --write .",
+        "format:check": "prettier --check .",
+        "prepare": "bob build"
+    },
+    "react-native-builder-bob": {
+        "source": "src",
+        "output": "lib",
+        "exclude": "**/__tests__/**",
+        "targets": [
+            "module",
+            [
+                "typescript",
+                {
+                    "project": "tsconfig.build.json"
+                }
+            ]
+        ]
+    },
+    "peerDependencies": {
+        "@expo/vector-icons": ">=14.0.0",
+        "@gorhom/bottom-sheet": "^5.0.0",
+        "@react-native-community/datetimepicker": ">=8.0.0",
+        "dayjs": "^1.11.0",
+        "expo-document-picker": "*",
+        "expo-file-system": "*",
+        "expo-haptics": "*",
+        "expo-image-manipulator": "*",
+        "expo-image-picker": "*",
+        "expo-router": "*",
+        "expo-status-bar": "*",
+        "expo-system-ui": "*",
+        "react": ">=19.0.0",
+        "react-hook-form": "^7.50.0",
+        "react-native": ">=0.79.0",
+        "react-native-gesture-handler": ">=2.20.0",
+        "react-native-keyboard-controller": ">=1.18.0",
+        "react-native-paper": "^5.12.0",
+        "react-native-reanimated": ">=4.0.0",
+        "react-native-safe-area-context": ">=5.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@gorhom/bottom-sheet": {
+            "optional": true
+        },
+        "expo-document-picker": {
+            "optional": true
+        },
+        "expo-file-system": {
+            "optional": true
+        },
+        "expo-image-manipulator": {
+            "optional": true
+        },
+        "expo-image-picker": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@expo/vector-icons": "^15.1.1",
+        "@gorhom/bottom-sheet": "^5.2.14",
+        "@react-native-community/datetimepicker": "^9.1.0",
+        "@types/react": "~19.2.4",
+        "dayjs": "^1.11.23",
+        "expo": "~57.0.27",
+        "expo-document-picker": "~57.0.3",
+        "expo-file-system": "~57.0.7",
+        "expo-haptics": "~57.0.3",
+        "expo-image-manipulator": "~57.0.21",
+        "expo-image-picker": "~57.0.20",
+        "expo-router": "~57.0.25",
+        "expo-status-bar": "~57.0.1",
+        "expo-system-ui": "~57.0.4",
+        "prettier": "^3.9.6",
+        "react": "^19.2.3",
+        "react-hook-form": "^7.90.0",
+        "react-native": "^0.86.3",
+        "react-native-builder-bob": "^0.43.2",
+        "react-native-gesture-handler": "~2.32.0",
+        "react-native-keyboard-controller": "^1.21.9",
+        "react-native-paper": "^5.15.3",
+        "react-native-reanimated": "^4.5.1",
+        "react-native-safe-area-context": "~5.7.0",
+        "react-native-screens": "~4.26.0",
+        "react-native-svg": "^15.15.4",
+        "react-native-worklets": "^0.10.1",
+        "typescript": "~6.0.3",
+        "vite": "^7.3.7",
+        "vitest": "^4.1.12"
+    }
+}

package/src/camara/CampoDeFotos.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { Controller, type FieldValues } from "react-hook-form";
+import { View } from "react-native";
+import BotonGrande from "../componentes/BotonGrande";
+import TiraDeFotos, { type FotoDeLaTira } from "../componentes/TiraDeFotos";
+import { Campo } from "../formularios/campos";
+import type { CampoAtado, SinValor } from "../formularios/controlados";
+import { crearEstilos } from "../tema";
+import {
+    elegirDeGaleria,
+    tomarFoto,
+    type AlTomarFoto,
+    type ArchivoElegido,
+    type PermisoDeCamara,
+} from "./elegir";
+
+/** El lado de cada miniatura: cabe un renglón de tres en un teléfono angosto. */
+const LADO = 96;
+
+/**
+ * Fotos que se capturan con un formulario y suben al guardarlo (la evidencia de un alta, el cierre
+ * de una revisión): sus miniaturas, cada una con su «×» y abriendo el visor, y debajo **Tomar foto**
+ * y **De la galería**. Lo que se guarda es la lista de `ArchivoElegido` ya reducidos; subirlos es
+ * de quien guarda.
+ *
+ * Las que suben al momento, sin esperar a un formulario (las de una ficha que ya existe), no van
+ * aquí: ésas son una `TiraDeFotos` con sus botones.
+ */
+export function CampoDeFotos({
+    etiqueta,
+    ayuda,
+    error,
+    valor,
+    onCambiar,
+    permiso,
+    varias = true,
+    alTomar,
+    disabled,
+}: {
+    etiqueta?: string;
+    ayuda?: string;
+    error?: string;
+    valor: ArchivoElegido[];
+    onCambiar: (valor: ArchivoElegido[]) => void;
+    /** Para qué se pide la cámara, si todavía no hay permiso. */
+    permiso: PermisoDeCamara;
+    /** Con `false`, una nueva reemplaza a la que había. */
+    varias?: boolean;
+    /** Lo que se hace con la original de la cámara (guardarla en la galería): ver `AlTomarFoto`. */
+    alTomar?: AlTomarFoto;
+    disabled?: boolean;
+}) {
+    const styles = useStyles();
+    // Reducir una foto tarda (se decodifica completa): el botón gira mientras tanto.
+    const [eligiendo, setEligiendo] = React.useState<"camara" | "galeria" | null>(null);
+
+    const agregar = async (de: "camara" | "galeria") => {
+        setEligiendo(de);
+        try {
+            const nuevas =
+                de === "camara"
+                    ? await tomarFoto(permiso, { alTomar })
+                    : await elegirDeGaleria({ varias });
+            if (nuevas.length) onCambiar(varias ? [...valor, ...nuevas] : nuevas.slice(0, 1));
+        } finally {
+            setEligiendo(null);
+        }
+    };
+
+    const fotos: FotoDeLaTira[] = valor.map((f, i) => ({
+        llave: `${f.uri}-${i}`,
+        esFoto: f.esFoto,
+        miniatura: { uri: f.uri },
+        nombre: f.nombre,
+        onQuitar: disabled ? undefined : () => onCambiar(valor.filter((_, j) => j !== i)),
+    }));
+
+    return (
+        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
+            <View style={styles.contenido}>
+                <TiraDeFotos fotos={fotos} lado={LADO} cuadricula />
+                <View style={styles.botones}>
+                    <BotonGrande
+                        icono="camera-outline"
+                        modo="contorno"
+                        cargando={eligiendo === "camara"}
+                        disabled={disabled || eligiendo !== null}
+                        onPress={() => void agregar("camara")}
+                    >
+                        Tomar foto
+                    </BotonGrande>
+                    <BotonGrande
+                        icono="image-outline"
+                        modo="contorno"
+                        cargando={eligiendo === "galeria"}
+                        disabled={disabled || eligiendo !== null}
+                        onPress={() => void agregar("galeria")}
+                    >
+                        De la galería
+                    </BotonGrande>
+                </View>
+            </View>
+        </Campo>
+    );
+}
+
+/** `CampoDeFotos` atado a react-hook-form: el valor es la lista de `ArchivoElegido`. */
+export function FotosControladas<T extends FieldValues>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeFotos>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeFotos
+                    {...props}
+                    valor={(value as ArchivoElegido[] | null) ?? []}
+                    onCambiar={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+const useStyles = crearEstilos(() => ({
+    contenido: { gap: 12 },
+    botones: { gap: 8 },
+}));