@sincpro/mobile-ui 3.2.0 → 3.3.0

package/dist/Display/Display.DocumentPreview.d.ts

@@ -0,0 +1,15 @@
+import type { DocumentRenderer } from "./document-renderer.js";
+import type { DocumentSource } from "../utils/document.js";
+export interface DocumentPreviewProps {
+    source: DocumentSource;
+    title?: string;
+    height?: number;
+    fit?: "top" | "contain";
+    onPress?: () => void;
+    renderer?: DocumentRenderer;
+    className?: string;
+    testID?: string;
+}
+declare function DocumentPreview({ source, title, height, fit, onPress, renderer, className, testID, }: DocumentPreviewProps): import("react").JSX.Element;
+export default DocumentPreview;
+export { DocumentPreview };

package/dist/Display/Display.DocumentPreview.js

@@ -0,0 +1,349 @@
+import { c as _c } from "react/compiler-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
+import Icon from "./Display.Icon.js";
+import { documentHeading, documentMeta, DocumentStatus, useDocumentPages } from "./document-pages.js";
+import Skeleton from "../Feedback/Feedback.Skeleton.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useWindowDimensions, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+const MAX_THUMBNAIL_WIDTH = 1080;
+function Notice(t0) {
+  const $ = _c(8);
+  const {
+    icon,
+    label,
+    color
+  } = t0;
+  let t1;
+  if ($[0] !== color || $[1] !== icon) {
+    t1 = _jsx(Icon, {
+      color: color,
+      name: icon,
+      size: 28
+    });
+    $[0] = color;
+    $[1] = icon;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== label) {
+    t2 = _jsx(Typography.Text, {
+      align: "center",
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      children: label
+    });
+    $[3] = label;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = _jsxs(View, {
+      className: "flex-1 items-center justify-center gap-2 px-4",
+      children: [t1, t2]
+    });
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+function DocumentPreview(t0) {
+  const $ = _c(68);
+  const {
+    source,
+    title,
+    height: t1,
+    fit: t2,
+    onPress,
+    renderer,
+    className,
+    testID
+  } = t0;
+  const height = t1 === undefined ? 180 : t1;
+  const fit = t2 === undefined ? "top" : t2;
+  const theme = useTheme();
+  const {
+    width,
+    scale
+  } = useWindowDimensions();
+  let t3;
+  if ($[0] !== scale || $[1] !== width) {
+    t3 = Math.round(width * scale);
+    $[0] = scale;
+    $[1] = width;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const document = useDocumentPages(source, Math.min(MAX_THUMBNAIL_WIDTH, t3), true, renderer);
+  const page = document.pages[0];
+  const failed = document.status === DocumentStatus.ERROR;
+  let t4;
+  if ($[3] !== document || $[4] !== title) {
+    t4 = title ?? documentHeading(document);
+    $[3] = document;
+    $[4] = title;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const heading = t4;
+  let t5;
+  if ($[6] !== document.isImage || $[7] !== document.label || $[8] !== document.pageCount) {
+    t5 = documentMeta(document.label, document.isImage, document.pageCount);
+    $[6] = document.isImage;
+    $[7] = document.label;
+    $[8] = document.pageCount;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  const meta = t5;
+  const handlePress = failed ? document.retry : onPress;
+  let t6;
+  if ($[10] !== height || $[11] !== theme.bg.muted) {
+    t6 = {
+      height,
+      backgroundColor: theme.bg.muted
+    };
+    $[10] = height;
+    $[11] = theme.bg.muted;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== document.attempt || $[14] !== document.reportPageError || $[15] !== document.status || $[16] !== fit || $[17] !== page) {
+    t7 = document.status === DocumentStatus.READY && page ? _jsx(ExpoImage, {
+      contentFit: fit === "top" ? "cover" : "contain",
+      contentPosition: "top",
+      onError: document.reportPageError,
+      source: {
+        uri: page.uri
+      },
+      style: {
+        flex: 1,
+        width: "100%",
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6
+      }
+    }, document.attempt) : null;
+    $[13] = document.attempt;
+    $[14] = document.reportPageError;
+    $[15] = document.status;
+    $[16] = fit;
+    $[17] = page;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== document.status) {
+    t8 = document.status === DocumentStatus.LOADING ? _jsx(Skeleton, {
+      height: "100%",
+      radius: 6,
+      width: "100%"
+    }) : null;
+    $[19] = document.status;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== failed || $[22] !== theme.danger) {
+    t9 = failed ? _jsx(Notice, {
+      color: theme.danger,
+      icon: "error",
+      label: "No se pudo generar la vista previa. Toca para reintentar."
+    }) : null;
+    $[21] = failed;
+    $[22] = theme.danger;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== document.status || $[25] !== theme.icon.tertiary) {
+    t10 = document.status === DocumentStatus.UNSUPPORTED ? _jsx(Notice, {
+      color: theme.icon.tertiary,
+      icon: "document",
+      label: "Vista previa no disponible"
+    }) : null;
+    $[24] = document.status;
+    $[25] = theme.icon.tertiary;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== t10 || $[28] !== t6 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9) {
+    t11 = _jsxs(View, {
+      className: "px-3 pt-3",
+      style: t6,
+      children: [t7, t8, t9, t10]
+    });
+    $[27] = t10;
+    $[28] = t6;
+    $[29] = t7;
+    $[30] = t8;
+    $[31] = t9;
+    $[32] = t11;
+  } else {
+    t11 = $[32];
+  }
+  const t12 = document.isImage ? "image" : "document";
+  let t13;
+  if ($[33] !== t12 || $[34] !== theme.icon.secondary) {
+    t13 = _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: t12,
+      size: 20
+    });
+    $[33] = t12;
+    $[34] = theme.icon.secondary;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  let t14;
+  if ($[36] !== heading) {
+    t14 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      numberOfLines: 1,
+      semibold: true,
+      children: heading
+    });
+    $[36] = heading;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  let t15;
+  if ($[38] !== meta) {
+    t15 = _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "caption",
+      children: meta
+    });
+    $[38] = meta;
+    $[39] = t15;
+  } else {
+    t15 = $[39];
+  }
+  let t16;
+  if ($[40] !== t14 || $[41] !== t15) {
+    t16 = _jsxs(View, {
+      className: "flex-1",
+      children: [t14, t15]
+    });
+    $[40] = t14;
+    $[41] = t15;
+    $[42] = t16;
+  } else {
+    t16 = $[42];
+  }
+  let t17;
+  if ($[43] !== failed || $[44] !== onPress || $[45] !== theme.icon.tertiary) {
+    t17 = onPress && !failed ? _jsx(Icon, {
+      color: theme.icon.tertiary,
+      name: "next",
+      size: 18
+    }) : null;
+    $[43] = failed;
+    $[44] = onPress;
+    $[45] = theme.icon.tertiary;
+    $[46] = t17;
+  } else {
+    t17 = $[46];
+  }
+  let t18;
+  if ($[47] !== t13 || $[48] !== t16 || $[49] !== t17) {
+    t18 = _jsxs(View, {
+      className: "flex-row items-center gap-3 px-3 py-2.5",
+      children: [t13, t16, t17]
+    });
+    $[47] = t13;
+    $[48] = t16;
+    $[49] = t17;
+    $[50] = t18;
+  } else {
+    t18 = $[50];
+  }
+  let t19;
+  if ($[51] !== t11 || $[52] !== t18) {
+    t19 = _jsxs(_Fragment, {
+      children: [t11, t18]
+    });
+    $[51] = t11;
+    $[52] = t18;
+    $[53] = t19;
+  } else {
+    t19 = $[53];
+  }
+  const body = t19;
+  let t20;
+  if ($[54] !== className) {
+    t20 = cn("overflow-hidden rounded-xl border border-border-light bg-bg-card", className);
+    $[54] = className;
+    $[55] = t20;
+  } else {
+    t20 = $[55];
+  }
+  const surface = t20;
+  const label = `Vista previa de ${heading}, ${meta}`;
+  if (!handlePress) {
+    let t21;
+    if ($[56] !== body || $[57] !== label || $[58] !== surface || $[59] !== testID) {
+      t21 = _jsx(View, {
+        accessibilityLabel: label,
+        accessibilityRole: "image",
+        accessible: true,
+        className: surface,
+        testID: testID,
+        children: body
+      });
+      $[56] = body;
+      $[57] = label;
+      $[58] = surface;
+      $[59] = testID;
+      $[60] = t21;
+    } else {
+      t21 = $[60];
+    }
+    return t21;
+  }
+  const t21 = failed ? "Reintenta generar la vista previa" : "Abre el documento";
+  let t22;
+  if ($[61] !== body || $[62] !== handlePress || $[63] !== label || $[64] !== surface || $[65] !== t21 || $[66] !== testID) {
+    t22 = _jsx(Pressable, {
+      accessibilityHint: t21,
+      accessibilityLabel: label,
+      className: surface,
+      onPress: handlePress,
+      testID: testID,
+      children: body
+    });
+    $[61] = body;
+    $[62] = handlePress;
+    $[63] = label;
+    $[64] = surface;
+    $[65] = t21;
+    $[66] = testID;
+    $[67] = t22;
+  } else {
+    t22 = $[67];
+  }
+  return t22;
+}
+export default DocumentPreview;
+export { DocumentPreview };

package/dist/Display/Display.DocumentViewer.d.ts

@@ -0,0 +1,15 @@
+import type { DocumentRenderer } from "./document-renderer.js";
+import type { DocumentSource } from "../utils/document.js";
+import { type ReactNode } from "react";
+export interface DocumentViewerProps {
+    visible: boolean;
+    source: DocumentSource | null;
+    title?: string;
+    onClose: () => void;
+    actions?: ReactNode;
+    renderer?: DocumentRenderer;
+    testID?: string;
+}
+declare function DocumentViewer({ visible, source, title, onClose, actions, renderer, testID, }: DocumentViewerProps): import("react").JSX.Element;
+export default DocumentViewer;
+export { DocumentViewer };

package/dist/Display/Display.DocumentViewer.js

@@ -0,0 +1,465 @@
+import { c as _c } from "react/compiler-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
+import { documentHeading, documentMeta, DocumentStatus, useDocumentPages } from "./document-pages.js";
+import State from "../Feedback/Feedback.State.js";
+import { AppBar } from "../Navigation/Navigation.AppBar.js";
+import { useTheme, useThemeVars } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { useState } from "react";
+import { Modal, ScrollView, useWindowDimensions, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+const MAX_RENDER_WIDTH = 2048;
+const ZOOM_SCALE = 2;
+const GUTTER = 12;
+const A4_RATIO = 1 / Math.SQRT2;
+function ViewerPage(t0) {
+  const $ = _c(26);
+  const {
+    page,
+    width,
+    number,
+    pageCount,
+    label,
+    onError
+  } = t0;
+  const theme = useTheme();
+  const [loadedRatio, setLoadedRatio] = useState(null);
+  const ratio = page.width && page.height ? page.width / page.height : loadedRatio ?? A4_RATIO;
+  let t1;
+  if ($[0] !== width) {
+    t1 = {
+      width,
+      gap: 6
+    };
+    $[0] = width;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== ratio || $[3] !== theme.border.light || $[4] !== theme.shadow.sm || $[5] !== width) {
+    t2 = {
+      width,
+      aspectRatio: ratio,
+      borderColor: theme.border.light,
+      borderWidth: 1,
+      ...theme.shadow.sm
+    };
+    $[2] = ratio;
+    $[3] = theme.border.light;
+    $[4] = theme.shadow.sm;
+    $[5] = width;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const t3 = pageCount > 1 ? `${label}, página ${number} de ${pageCount}` : label;
+  let t4;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = event => {
+      if (event.source.height > 0) {
+        setLoadedRatio(event.source.width / event.source.height);
+      }
+    };
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== page.uri) {
+    t5 = {
+      uri: page.uri
+    };
+    $[8] = page.uri;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      width: "100%",
+      height: "100%"
+    };
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== onError || $[12] !== t3 || $[13] !== t5) {
+    t7 = _jsx(ExpoImage, {
+      accessibilityLabel: t3,
+      accessible: true,
+      contentFit: "contain",
+      onError: onError,
+      onLoad: t4,
+      source: t5,
+      style: t6
+    });
+    $[11] = onError;
+    $[12] = t3;
+    $[13] = t5;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== t2 || $[16] !== t7) {
+    t8 = _jsx(View, {
+      style: t2,
+      children: t7
+    });
+    $[15] = t2;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== number || $[19] !== pageCount || $[20] !== theme.text) {
+    t9 = pageCount > 1 ? _jsxs(Typography.Text, {
+      align: "center",
+      style: {
+        color: theme.text.secondary
+      },
+      variant: "caption",
+      children: ["P\xE1gina ", number, " de ", pageCount]
+    }) : null;
+    $[18] = number;
+    $[19] = pageCount;
+    $[20] = theme.text;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== t1 || $[23] !== t8 || $[24] !== t9) {
+    t10 = _jsxs(View, {
+      style: t1,
+      children: [t8, t9]
+    });
+    $[22] = t1;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  return t10;
+}
+function ViewerContent(t0) {
+  const $ = _c(55);
+  const {
+    source,
+    title,
+    onClose,
+    actions,
+    renderer
+  } = t0;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const {
+    width,
+    scale
+  } = useWindowDimensions();
+  const [zoomed, setZoomed] = useState(false);
+  let t1;
+  if ($[0] !== scale || $[1] !== width) {
+    t1 = Math.round(width * scale * ZOOM_SCALE);
+    $[0] = scale;
+    $[1] = width;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const document = useDocumentPages(source, Math.min(MAX_RENDER_WIDTH, t1), false, renderer);
+  const ready = document.status === DocumentStatus.READY;
+  let t2;
+  if ($[3] !== document || $[4] !== title) {
+    t2 = title ?? documentHeading(document);
+    $[3] = document;
+    $[4] = title;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const heading = t2;
+  const fitWidth = width - insets.left - insets.right - GUTTER * 2;
+  const pageWidth = zoomed ? fitWidth * ZOOM_SCALE : fitWidth;
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      gap: GUTTER * 2
+    };
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== document.attempt || $[8] !== document.pageCount || $[9] !== document.pages || $[10] !== document.reportPageError || $[11] !== heading || $[12] !== pageWidth) {
+    let t5;
+    if ($[14] !== document.attempt || $[15] !== document.pageCount || $[16] !== document.reportPageError || $[17] !== heading || $[18] !== pageWidth) {
+      t5 = (page, index) => _jsx(ViewerPage, {
+        label: heading,
+        number: index + 1,
+        onError: document.reportPageError,
+        page: page,
+        pageCount: document.pageCount,
+        width: pageWidth
+      }, `${document.attempt}:${index}`);
+      $[14] = document.attempt;
+      $[15] = document.pageCount;
+      $[16] = document.reportPageError;
+      $[17] = heading;
+      $[18] = pageWidth;
+      $[19] = t5;
+    } else {
+      t5 = $[19];
+    }
+    t4 = document.pages.map(t5);
+    $[7] = document.attempt;
+    $[8] = document.pageCount;
+    $[9] = document.pages;
+    $[10] = document.reportPageError;
+    $[11] = heading;
+    $[12] = pageWidth;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[20] !== t4) {
+    t5 = _jsx(View, {
+      style: t3,
+      children: t4
+    });
+    $[20] = t4;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  const pages = t5;
+  let t6;
+  if ($[22] !== theme.bg.muted) {
+    t6 = {
+      flex: 1,
+      backgroundColor: theme.bg.muted
+    };
+    $[22] = theme.bg.muted;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  let t7;
+  if ($[24] !== ready || $[25] !== zoomed) {
+    t7 = ready ? _jsx(AppBar.Action, {
+      accessibilityLabel: zoomed ? "Ajustar al ancho" : "Ampliar",
+      label: zoomed ? "Ajustar" : "Ampliar",
+      onPress: () => setZoomed(_temp)
+    }) : null;
+    $[24] = ready;
+    $[25] = zoomed;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== actions || $[28] !== t7) {
+    t8 = _jsxs(_Fragment, {
+      children: [t7, actions]
+    });
+    $[27] = actions;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== onClose) {
+    t9 = _jsx(AppBar.Action, {
+      accessibilityLabel: "Cerrar",
+      icon: "close",
+      onPress: onClose
+    });
+    $[30] = onClose;
+    $[31] = t9;
+  } else {
+    t9 = $[31];
+  }
+  let t10;
+  if ($[32] !== document.isImage || $[33] !== document.label || $[34] !== document.pageCount) {
+    t10 = documentMeta(document.label, document.isImage, document.pageCount);
+    $[32] = document.isImage;
+    $[33] = document.label;
+    $[34] = document.pageCount;
+    $[35] = t10;
+  } else {
+    t10 = $[35];
+  }
+  let t11;
+  if ($[36] !== heading || $[37] !== t10 || $[38] !== t8 || $[39] !== t9) {
+    t11 = _jsx(AppBar, {
+      actions: t8,
+      leading: t9,
+      subtitle: t10,
+      title: heading
+    });
+    $[36] = heading;
+    $[37] = t10;
+    $[38] = t8;
+    $[39] = t9;
+    $[40] = t11;
+  } else {
+    t11 = $[40];
+  }
+  let t12;
+  if ($[41] !== document.label || $[42] !== document.retry || $[43] !== document.status || $[44] !== insets.bottom || $[45] !== insets.left || $[46] !== insets.right || $[47] !== pages || $[48] !== ready || $[49] !== zoomed) {
+    t12 = ready ? _jsx(ScrollView, {
+      contentContainerStyle: {
+        paddingTop: GUTTER,
+        paddingLeft: insets.left + GUTTER,
+        paddingRight: insets.right + GUTTER,
+        paddingBottom: insets.bottom + GUTTER * 2
+      },
+      children: zoomed ? _jsx(ScrollView, {
+        horizontal: true,
+        children: pages
+      }) : pages
+    }) : _jsxs(View, {
+      style: {
+        flex: 1,
+        paddingBottom: insets.bottom
+      },
+      children: [document.status === DocumentStatus.LOADING ? _jsx(State, {
+        kind: "loading",
+        message: "Generando vista previa\u2026"
+      }) : null, document.status === DocumentStatus.ERROR ? _jsx(State, {
+        kind: "error",
+        message: "No se pudo generar la vista previa del documento.",
+        onRetry: document.retry
+      }) : null, document.status === DocumentStatus.UNSUPPORTED ? _jsx(State, {
+        description: `Esta app no tiene un visor configurado para ${document.label}.`,
+        icon: "document",
+        kind: "empty",
+        title: "Vista previa no disponible"
+      }) : null]
+    });
+    $[41] = document.label;
+    $[42] = document.retry;
+    $[43] = document.status;
+    $[44] = insets.bottom;
+    $[45] = insets.left;
+    $[46] = insets.right;
+    $[47] = pages;
+    $[48] = ready;
+    $[49] = zoomed;
+    $[50] = t12;
+  } else {
+    t12 = $[50];
+  }
+  let t13;
+  if ($[51] !== t11 || $[52] !== t12 || $[53] !== t6) {
+    t13 = _jsxs(View, {
+      style: t6,
+      children: [t11, t12]
+    });
+    $[51] = t11;
+    $[52] = t12;
+    $[53] = t6;
+    $[54] = t13;
+  } else {
+    t13 = $[54];
+  }
+  return t13;
+}
+function _temp(previous) {
+  return !previous;
+}
+function DocumentViewer(t0) {
+  const $ = _c(18);
+  const {
+    visible,
+    source,
+    title,
+    onClose,
+    actions,
+    renderer,
+    testID
+  } = t0;
+  const reducedMotion = useReducedMotion();
+  const themeVars = useThemeVars();
+  const t1 = reducedMotion ? "none" : "slide";
+  const t2 = visible && source !== null;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      flex: 1
+    };
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  let t4;
+  if ($[1] !== themeVars) {
+    t4 = [t3, themeVars];
+    $[1] = themeVars;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== actions || $[4] !== onClose || $[5] !== renderer || $[6] !== source || $[7] !== title) {
+    t5 = source ? _jsx(ViewerContent, {
+      actions: actions,
+      onClose: onClose,
+      renderer: renderer,
+      source: source,
+      title: title
+    }) : null;
+    $[3] = actions;
+    $[4] = onClose;
+    $[5] = renderer;
+    $[6] = source;
+    $[7] = title;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t4 || $[10] !== t5 || $[11] !== testID) {
+    t6 = _jsx(View, {
+      style: t4,
+      testID: testID,
+      children: t5
+    });
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = testID;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== onClose || $[14] !== t1 || $[15] !== t2 || $[16] !== t6) {
+    t7 = _jsx(Modal, {
+      animationType: t1,
+      navigationBarTranslucent: true,
+      onRequestClose: onClose,
+      statusBarTranslucent: true,
+      visible: t2,
+      children: t6
+    });
+    $[13] = onClose;
+    $[14] = t1;
+    $[15] = t2;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  return t7;
+}
+export default DocumentViewer;
+export { DocumentViewer };

package/dist/Display/document-pages.d.ts

@@ -0,0 +1,21 @@
+import { type DocumentRenderer } from "./document-renderer.js";
+import { type DocumentPage, type DocumentSource } from "../utils/document.js";
+export declare enum DocumentStatus {
+    LOADING = "loading",
+    READY = "ready",
+    UNSUPPORTED = "unsupported",
+    ERROR = "error"
+}
+export interface DocumentPagesState {
+    label: string;
+    isImage: boolean;
+    status: DocumentStatus;
+    pageCount: number;
+    pages: DocumentPage[];
+    attempt: number;
+    retry: () => void;
+    reportPageError: () => void;
+}
+export declare function documentMeta(label: string, isImage: boolean, pageCount: number): string;
+export declare function documentHeading(state: DocumentPagesState): string;
+export declare function useDocumentPages(source: DocumentSource, maxWidth: number, firstPageOnly: boolean, override?: DocumentRenderer): DocumentPagesState;

package/dist/Display/document-pages.js

@@ -0,0 +1,282 @@
+import { c as _c } from "react/compiler-runtime";
+import { documentRenderer } from "./document-renderer.js";
+import { documentImageUri, documentMimeType, isImageMimeType, mimeTypeLabel } from "../utils/document.js";
+import { useEffect, useState } from "react";
+export let DocumentStatus = /*#__PURE__*/function (DocumentStatus) {
+  DocumentStatus["LOADING"] = "loading";
+  DocumentStatus["READY"] = "ready";
+  DocumentStatus["UNSUPPORTED"] = "unsupported";
+  DocumentStatus["ERROR"] = "error";
+  return DocumentStatus;
+}({});
+export function documentMeta(label, isImage, pageCount) {
+  if (isImage || pageCount === 0) return label;
+  return `${label} · ${pageCount} ${pageCount === 1 ? "página" : "páginas"}`;
+}
+export function documentHeading(state) {
+  return state.isImage ? state.label : `Documento ${state.label}`;
+}
+export function useDocumentPages(source, maxWidth, firstPageOnly, override) {
+  const $ = _c(45);
+  let isImage;
+  let renderer;
+  let t0;
+  if ($[0] !== override || $[1] !== source) {
+    const detected = documentMimeType(source);
+    renderer = override ?? documentRenderer(detected);
+    isImage = !renderer && isImageMimeType(detected);
+    t0 = renderer?.label ?? mimeTypeLabel(detected);
+    $[0] = override;
+    $[1] = source;
+    $[2] = isImage;
+    $[3] = renderer;
+    $[4] = t0;
+  } else {
+    isImage = $[2];
+    renderer = $[3];
+    t0 = $[4];
+  }
+  const label = t0;
+  const isUri = "uri" in source;
+  const value = isUri ? source.uri : source.base64;
+  const {
+    mimeType
+  } = source;
+  const [attempt, setAttempt] = useState(0);
+  const [rendered, setRendered] = useState(null);
+  const [pageFailure, setPageFailure] = useState(null);
+  let t1;
+  let t2;
+  if ($[5] !== attempt || $[6] !== firstPageOnly || $[7] !== isUri || $[8] !== maxWidth || $[9] !== mimeType || $[10] !== renderer || $[11] !== value) {
+    t1 = () => {
+      if (!renderer) {
+        return;
+      }
+      const controller = new AbortController();
+      const target = isUri ? {
+        uri: value,
+        mimeType
+      } : {
+        base64: value,
+        mimeType
+      };
+      const request = {
+        renderer,
+        value,
+        isUri,
+        mimeType,
+        maxWidth,
+        firstPageOnly,
+        attempt
+      };
+      renderer.render(target, {
+        maxWidth,
+        firstPageOnly,
+        signal: controller.signal
+      }).then(result => {
+        if (!controller.signal.aborted) {
+          setRendered({
+            ...request,
+            failed: false,
+            ...result
+          });
+        }
+      }, error => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        console.error(`[Document] ${renderer.label} preview failed`, error);
+        setRendered({
+          ...request,
+          failed: true,
+          pageCount: 0,
+          pages: []
+        });
+      });
+      return () => controller.abort();
+    };
+    t2 = [renderer, isUri, value, mimeType, maxWidth, firstPageOnly, attempt];
+    $[5] = attempt;
+    $[6] = firstPageOnly;
+    $[7] = isUri;
+    $[8] = maxWidth;
+    $[9] = mimeType;
+    $[10] = renderer;
+    $[11] = value;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t1 = $[12];
+    t2 = $[13];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => setAttempt(_temp);
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== attempt || $[16] !== value) {
+    t4 = () => setPageFailure({
+      value,
+      attempt
+    });
+    $[15] = attempt;
+    $[16] = value;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  let t5;
+  if ($[18] !== attempt || $[19] !== isImage || $[20] !== label || $[21] !== t4) {
+    t5 = {
+      label,
+      isImage,
+      attempt,
+      retry: t3,
+      reportPageError: t4
+    };
+    $[18] = attempt;
+    $[19] = isImage;
+    $[20] = label;
+    $[21] = t4;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  const base = t5;
+  let t6;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = [];
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  let t7;
+  if ($[24] !== base) {
+    t7 = {
+      ...base,
+      pageCount: 0,
+      pages: t6
+    };
+    $[24] = base;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  const empty = t7;
+  const pageFailed = pageFailure?.value === value && pageFailure.attempt === attempt;
+  if (pageFailed) {
+    let t8;
+    if ($[26] !== empty) {
+      t8 = {
+        ...empty,
+        status: DocumentStatus.ERROR
+      };
+      $[26] = empty;
+      $[27] = t8;
+    } else {
+      t8 = $[27];
+    }
+    return t8;
+  }
+  if (isImage) {
+    let t8;
+    if ($[28] !== source) {
+      t8 = documentImageUri(source);
+      $[28] = source;
+      $[29] = t8;
+    } else {
+      t8 = $[29];
+    }
+    let t9;
+    if ($[30] !== t8) {
+      t9 = [{
+        uri: t8
+      }];
+      $[30] = t8;
+      $[31] = t9;
+    } else {
+      t9 = $[31];
+    }
+    let t10;
+    if ($[32] !== base || $[33] !== t9) {
+      t10 = {
+        ...base,
+        status: DocumentStatus.READY,
+        pageCount: 1,
+        pages: t9
+      };
+      $[32] = base;
+      $[33] = t9;
+      $[34] = t10;
+    } else {
+      t10 = $[34];
+    }
+    return t10;
+  }
+  if (!renderer) {
+    let t8;
+    if ($[35] !== empty) {
+      t8 = {
+        ...empty,
+        status: DocumentStatus.UNSUPPORTED
+      };
+      $[35] = empty;
+      $[36] = t8;
+    } else {
+      t8 = $[36];
+    }
+    return t8;
+  }
+  const current = rendered?.renderer === renderer && rendered.value === value && rendered.isUri === isUri && rendered.mimeType === mimeType && rendered.maxWidth === maxWidth && rendered.firstPageOnly === firstPageOnly && rendered.attempt === attempt ? rendered : null;
+  if (!current) {
+    let t8;
+    if ($[37] !== empty) {
+      t8 = {
+        ...empty,
+        status: DocumentStatus.LOADING
+      };
+      $[37] = empty;
+      $[38] = t8;
+    } else {
+      t8 = $[38];
+    }
+    return t8;
+  }
+  if (current.failed) {
+    let t8;
+    if ($[39] !== empty) {
+      t8 = {
+        ...empty,
+        status: DocumentStatus.ERROR
+      };
+      $[39] = empty;
+      $[40] = t8;
+    } else {
+      t8 = $[40];
+    }
+    return t8;
+  }
+  let t8;
+  if ($[41] !== base || $[42] !== current.pageCount || $[43] !== current.pages) {
+    t8 = {
+      ...base,
+      status: DocumentStatus.READY,
+      pageCount: current.pageCount,
+      pages: current.pages
+    };
+    $[41] = base;
+    $[42] = current.pageCount;
+    $[43] = current.pages;
+    $[44] = t8;
+  } else {
+    t8 = $[44];
+  }
+  return t8;
+}
+function _temp(previous) {
+  return previous + 1;
+}

package/dist/Display/document-renderer.d.ts

@@ -0,0 +1,30 @@
+import type { DocumentPage, DocumentSource } from "../utils/document.js";
+/**
+ * The design system shows pages; turning a document into pages is the app's job. Register
+ * one renderer per MIME type at startup (`"image/*"` matches every image):
+ *
+ *   registerDocumentRenderers({
+ *     "application/pdf": { label: "PDF", render: renderPdfPages },
+ *     "text/html": { label: "HTML", render: renderHtmlPages },
+ *   });
+ *
+ * A component can override it with its `renderer` prop; keep that object stable (module
+ * scope), since a new one starts a new render. Images without a renderer load natively;
+ * any other type without one shows that the preview is unavailable.
+ */
+export interface DocumentRenderRequest {
+    maxWidth: number;
+    firstPageOnly: boolean;
+    signal: AbortSignal;
+}
+export interface DocumentRenderResult {
+    pageCount: number;
+    pages: DocumentPage[];
+}
+export interface DocumentRenderer {
+    label: string;
+    render: (source: DocumentSource, request: DocumentRenderRequest) => Promise<DocumentRenderResult>;
+}
+export declare function registerDocumentRenderers(entries: Record<string, DocumentRenderer | null>): void;
+export declare function resetDocumentRenderers(): void;
+export declare function documentRenderer(mimeType: string | undefined): DocumentRenderer | undefined;

package/dist/Display/document-renderer.js

@@ -0,0 +1,28 @@
+/**
+ * The design system shows pages; turning a document into pages is the app's job. Register
+ * one renderer per MIME type at startup (`"image/*"` matches every image):
+ *
+ *   registerDocumentRenderers({
+ *     "application/pdf": { label: "PDF", render: renderPdfPages },
+ *     "text/html": { label: "HTML", render: renderHtmlPages },
+ *   });
+ *
+ * A component can override it with its `renderer` prop; keep that object stable (module
+ * scope), since a new one starts a new render. Images without a renderer load natively;
+ * any other type without one shows that the preview is unavailable.
+ */
+
+const renderers = new Map();
+export function registerDocumentRenderers(entries) {
+  for (const [mimeType, renderer] of Object.entries(entries)) {
+    if (renderer) renderers.set(mimeType.toLowerCase(), renderer);else renderers.delete(mimeType.toLowerCase());
+  }
+}
+export function resetDocumentRenderers() {
+  renderers.clear();
+}
+export function documentRenderer(mimeType) {
+  if (!mimeType) return undefined;
+  const type = mimeType.toLowerCase();
+  return renderers.get(type) ?? renderers.get(`${type.split("/")[0]}/*`);
+}

package/dist/Display/index.d.ts

@@ -8,6 +8,8 @@ import CountRecords from "./Display.CountRecords.js";
 import DataTable from "./Display.DataTable.js";
 import Date from "./Display.Date.js";
 import Divider from "./Display.Divider.js";
+import DocumentPreview from "./Display.DocumentPreview.js";
+import DocumentViewer from "./Display.DocumentViewer.js";
 import ExpoImage from "./Display.ExpoImage.js";
 import GradientSurface from "./Display.GradientSurface.js";
 import IconBadge from "./Display.IconBadge.js";
@@ -70,6 +72,8 @@ export declare const Display: {
     Tag: typeof Tag;
     Image: typeof DisplayImage;
     ExpoImage: typeof ExpoImage;
+    DocumentPreview: typeof DocumentPreview;
+    DocumentViewer: typeof DocumentViewer;
     MediaCard: typeof MediaCard;
     MediaEmbed: typeof MediaEmbed;
     Story: typeof Story;
@@ -109,13 +113,17 @@ export { type BadgeProps, BadgeVariants };
 export type { AmountSummaryRootProps, AmountSummaryRowProps, AmountSummaryTotalProps, } from "./Display.AmountSummary.js";
 export type { CarouselControlsProps, CarouselProps, } from "./Display.Carousel.js";
 export type { CircleButtonProps } from "./Display.CircleButton.js";
+export type { DocumentPreviewProps } from "./Display.DocumentPreview.js";
+export type { DocumentViewerProps } from "./Display.DocumentViewer.js";
 export type { IconProps } from "./Display.Icon.js";
 export type { ListGroupProps } from "./Display.ListGroup.js";
 export type { ListItemProps } from "./Display.ListItem.js";
 export type { MenuCardProps } from "./Display.MenuCard.js";
 export type { MenuGridItem } from "./Display.MenuGrid.js";
 export { defineStatuses, resolveStatus, type StatusBadgeProps, type StatusDefinition, type StatusMap, type StatusTone, } from "./Display.StatusBadge.js";
+export { type DocumentRenderer, type DocumentRenderRequest, type DocumentRenderResult, registerDocumentRenderers, resetDocumentRenderers, } from "./document-renderer.js";
 export { ICON_FONT_FAMILY, ICON_FONTS } from "./icon-font.js";
 export { type BuiltInIconName, ICON_NAMES, type IconName, } from "./icon-map.js";
 export { type CustomIconRegistry, type CustomIconRenderer, registerIcons, } from "./icon-registry.js";
+export { documentBase64, documentMimeType, type DocumentPage, type DocumentSource, } from "../utils/document.js";
 export default Display;

package/dist/Display/index.js

@@ -12,6 +12,8 @@ import CountRecords from "./Display.CountRecords.js";
 import DataTable from "./Display.DataTable.js";
 import Date from "./Display.Date.js";
 import Divider from "./Display.Divider.js";
+import DocumentPreview from "./Display.DocumentPreview.js";
+import DocumentViewer from "./Display.DocumentViewer.js";
 import ExpoImage from "./Display.ExpoImage.js";
 import GradientSurface from "./Display.GradientSurface.js";
 import Icon from "./Display.Icon.js";
@@ -58,6 +60,8 @@ export const Display = {
   Tag,
   Image: DisplayImage,
   ExpoImage,
+  DocumentPreview,
+  DocumentViewer,
   MediaCard,
   MediaEmbed,
   Story,
@@ -95,7 +99,9 @@ export const Display = {
 };
 export { BadgeVariants };
 export { defineStatuses, resolveStatus } from "./Display.StatusBadge.js";
+export { registerDocumentRenderers, resetDocumentRenderers } from "./document-renderer.js";
 export { ICON_FONT_FAMILY, ICON_FONTS } from "./icon-font.js";
 export { ICON_NAMES } from "./icon-map.js";
 export { registerIcons } from "./icon-registry.js";
+export { documentBase64, documentMimeType } from "../utils/document.js";
 export default Display;

package/dist/utils/document.d.ts

@@ -0,0 +1,18 @@
+export type DocumentSource = {
+    uri: string;
+    mimeType?: string;
+} | {
+    base64: string;
+    mimeType?: string;
+};
+export interface DocumentPage {
+    uri: string;
+    width?: number;
+    height?: number;
+}
+export declare function stripDataUri(value: string): string;
+export declare function documentMimeType(source: DocumentSource): string | undefined;
+export declare function isImageMimeType(mimeType: string | undefined): boolean;
+export declare function mimeTypeLabel(mimeType: string | undefined): string;
+export declare function documentBase64(source: DocumentSource): string | undefined;
+export declare function documentImageUri(source: DocumentSource): string;

package/dist/utils/document.js

@@ -0,0 +1,46 @@
+const DATA_URI_PREFIX = /^data:([^;,]*)[^,]*,/;
+const BASE64_SIGNATURES = [["JVBER", "application/pdf"], ["iVBORw0KGgo", "image/png"], ["/9j/", "image/jpeg"], ["R0lGOD", "image/gif"], ["UklGR", "image/webp"], ["PCFET0NUWVBF", "text/html"], ["PCFkb2N0eXBl", "text/html"], ["PGh0bWw", "text/html"]];
+const FILE_EXTENSIONS = {
+  pdf: "application/pdf",
+  html: "text/html",
+  htm: "text/html"
+};
+const MIME_LABELS = {
+  "application/pdf": "PDF",
+  "text/html": "HTML"
+};
+function dataUriMimeType(value) {
+  return DATA_URI_PREFIX.exec(value)?.[1] || undefined;
+}
+export function stripDataUri(value) {
+  const prefix = DATA_URI_PREFIX.exec(value);
+  return prefix ? value.slice(prefix[0].length) : value;
+}
+export function documentMimeType(source) {
+  if (source.mimeType) return source.mimeType;
+  if ("uri" in source) {
+    const extension = /\.([a-z0-9]+)($|[?#])/i.exec(source.uri)?.[1]?.toLowerCase();
+    return dataUriMimeType(source.uri) ?? (extension ? FILE_EXTENSIONS[extension] : undefined);
+  }
+  const declared = dataUriMimeType(source.base64);
+  if (declared) return declared;
+  const payload = source.base64.trimStart();
+  return BASE64_SIGNATURES.find(([signature]) => payload.startsWith(signature))?.[1];
+}
+export function isImageMimeType(mimeType) {
+  return !mimeType || mimeType.toLowerCase().startsWith("image/");
+}
+export function mimeTypeLabel(mimeType) {
+  if (isImageMimeType(mimeType)) return "Imagen";
+  const type = mimeType.toLowerCase();
+  return MIME_LABELS[type] ?? type.split("/").pop().toUpperCase();
+}
+export function documentBase64(source) {
+  if ("base64" in source) return stripDataUri(source.base64).trim();
+  return source.uri.startsWith("data:") ? stripDataUri(source.uri) : undefined;
+}
+export function documentImageUri(source) {
+  if ("uri" in source) return source.uri;
+  if (source.base64.startsWith("data:")) return source.base64;
+  return `data:${documentMimeType(source) ?? "image/png"};base64,${source.base64.trim()}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -119,8 +119,10 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "expo": "~58.0.23",
+    "expo-asset": "~58.0.20",
     "expo-checkbox": "~58.0.2",
     "expo-clipboard": "~58.0.4",
+    "expo-file-system": "~58.0.13",
     "expo-font": "~58.0.11",
     "expo-image": "~58.0.18",
     "expo-linear-gradient": "~58.0.3",
@@ -139,6 +141,7 @@
     "react-native-currency-input": "^1.1.1",
     "react-native-gesture-handler": "~3.3.0",
     "react-native-keyboard-controller": "1.22.7",
+    "react-native-pdf-thumbnail": "2.0.0",
     "react-native-reanimated": "4.7.1",
     "react-native-safe-area-context": "~5.11.1",
     "react-native-sortables": "^1.10.1",