@sincpro/mobile-ui 3.1.0 → 3.3.0

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/icon-map.d.ts

@@ -10,7 +10,7 @@ export declare const ICON_MAP: {
         readonly md: "add";
     };
     readonly "add-circle": {
-        readonly sf: "plus.circle.fill";
+        readonly sf: "plus.circle";
         readonly md: "add_circle";
     };
     readonly archive: {
@@ -90,7 +90,7 @@ export declare const ICON_MAP: {
         readonly md: "delete";
     };
     readonly dismiss: {
-        readonly sf: "xmark.circle.fill";
+        readonly sf: "xmark.circle";
         readonly md: "cancel";
     };
     readonly document: {
@@ -118,7 +118,7 @@ export declare const ICON_MAP: {
         readonly md: "inbox";
     };
     readonly error: {
-        readonly sf: "exclamationmark.circle.fill";
+        readonly sf: "exclamationmark.circle";
         readonly md: "error";
     };
     readonly expand: {
@@ -146,7 +146,7 @@ export declare const ICON_MAP: {
         readonly md: "visibility_off";
     };
     readonly home: {
-        readonly sf: "house.fill";
+        readonly sf: "house";
         readonly md: "home";
     };
     readonly image: {
@@ -158,7 +158,7 @@ export declare const ICON_MAP: {
         readonly md: "inbox";
     };
     readonly info: {
-        readonly sf: "info.circle.fill";
+        readonly sf: "info.circle";
         readonly md: "info";
     };
     readonly link: {
@@ -206,7 +206,7 @@ export declare const ICON_MAP: {
         readonly md: "more_vert";
     };
     readonly mute: {
-        readonly sf: "speaker.slash.fill";
+        readonly sf: "speaker.slash";
         readonly md: "volume_off";
     };
     readonly next: {
@@ -290,11 +290,11 @@ export declare const ICON_MAP: {
         readonly md: "share";
     };
     readonly stop: {
-        readonly sf: "hand.raised.fill";
+        readonly sf: "hand.raised";
         readonly md: "front_hand";
     };
     readonly success: {
-        readonly sf: "checkmark.circle.fill";
+        readonly sf: "checkmark.circle";
         readonly md: "check_circle";
     };
     readonly sync: {
@@ -326,7 +326,7 @@ export declare const ICON_MAP: {
         readonly md: "visibility";
     };
     readonly volume: {
-        readonly sf: "speaker.wave.2.fill";
+        readonly sf: "speaker.wave.2";
         readonly md: "volume_up";
     };
     readonly wallet: {
@@ -334,7 +334,7 @@ export declare const ICON_MAP: {
         readonly md: "wallet";
     };
     readonly warning: {
-        readonly sf: "exclamationmark.triangle.fill";
+        readonly sf: "exclamationmark.triangle";
         readonly md: "warning";
     };
     readonly wifi: {

package/dist/Display/icon-map.js

@@ -1,10 +1,14 @@
+// Android and web draw from Material Symbols 400, an outline-only font. SF Symbols use the
+// outline variant too, so an icon looks the same on both platforms. Only glyphs that are
+// solid in Material as well (play, pause) or whose fill is the meaning against an empty pair
+// (rating / rating-empty, bookmark / bookmark-empty) use `.fill`.
 export const ICON_MAP = {
   add: {
     sf: "plus",
     md: "add"
   },
   "add-circle": {
-    sf: "plus.circle.fill",
+    sf: "plus.circle",
     md: "add_circle"
   },
   archive: {
@@ -84,7 +88,7 @@ export const ICON_MAP = {
     md: "delete"
   },
   dismiss: {
-    sf: "xmark.circle.fill",
+    sf: "xmark.circle",
     md: "cancel"
   },
   document: {
@@ -112,7 +116,7 @@ export const ICON_MAP = {
     md: "inbox"
   },
   error: {
-    sf: "exclamationmark.circle.fill",
+    sf: "exclamationmark.circle",
     md: "error"
   },
   expand: {
@@ -140,7 +144,7 @@ export const ICON_MAP = {
     md: "visibility_off"
   },
   home: {
-    sf: "house.fill",
+    sf: "house",
     md: "home"
   },
   image: {
@@ -152,7 +156,7 @@ export const ICON_MAP = {
     md: "inbox"
   },
   info: {
-    sf: "info.circle.fill",
+    sf: "info.circle",
     md: "info"
   },
   link: {
@@ -200,7 +204,7 @@ export const ICON_MAP = {
     md: "more_vert"
   },
   mute: {
-    sf: "speaker.slash.fill",
+    sf: "speaker.slash",
     md: "volume_off"
   },
   next: {
@@ -284,11 +288,11 @@ export const ICON_MAP = {
     md: "share"
   },
   stop: {
-    sf: "hand.raised.fill",
+    sf: "hand.raised",
     md: "front_hand"
   },
   success: {
-    sf: "checkmark.circle.fill",
+    sf: "checkmark.circle",
     md: "check_circle"
   },
   sync: {
@@ -320,7 +324,7 @@ export const ICON_MAP = {
     md: "visibility"
   },
   volume: {
-    sf: "speaker.wave.2.fill",
+    sf: "speaker.wave.2",
     md: "volume_up"
   },
   wallet: {
@@ -328,7 +332,7 @@ export const ICON_MAP = {
     md: "wallet"
   },
   warning: {
-    sf: "exclamationmark.triangle.fill",
+    sf: "exclamationmark.triangle",
     md: "warning"
   },
   wifi: {

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/Form/Form.DatePicker.js

@@ -49,6 +49,7 @@ function withClockTime(base, time) {
   next.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
   return next;
 }
+const CALENDAR_SNAP_POINTS = ["90%"];
 function DatePicker(t0) {
   const $ = _c(107);
   const {
@@ -464,6 +465,7 @@ function DatePicker(t0) {
         title: "Aplicar"
       }),
       onClose: close,
+      snapPoints: mode === "date" ? CALENDAR_SNAP_POINTS : undefined,
       title: label ?? (mode === "time" ? "Seleccionar hora" : "Seleccionar fecha"),
       visible: open,
       children: [open ? _jsx(View, {

package/dist/Form/Form.Input.d.ts

@@ -21,5 +21,5 @@ export interface FormInputProps extends Omit<TextInputProps, "secureTextEntry">
  * | `card`    | bodySmall, semibold    | card surface, rounded-lg, ≥48           | 8            |
  * | `outline` | bodyLarge              | border only, rounded, 44 high           | 16           |
  */
-declare function FormInput({ label, error, tooltip, look, secure, style, multiline, numberOfLines, onFocus, onBlur, className, ref, ...props }: FormInputProps): import("react").JSX.Element;
+declare function FormInput({ label, error, tooltip, look, secure, style, multiline, numberOfLines, onFocus, onBlur, onSubmitEditing, submitBehavior, className, ref, ...props }: FormInputProps): import("react").JSX.Element;
 export default FormInput;