@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/utils/serializer.js

@@ -1,44 +1,44 @@
 export function safeJsonStringify(obj, pretty = false) {
-    const seen = new WeakSet();
-    if (pretty) {
-        return JSON.stringify(obj, (key, value) => {
-            if (key.startsWith("_")) {
-                return undefined;
-            }
-            if (value instanceof Map) {
-                return Object.fromEntries(value);
-            }
-            if (value instanceof Set) {
-                return Array.from(value);
-            }
-            if (typeof value === "object" && value !== null) {
-                if (seen.has(value)) {
-                    return "[Circular]";
-                }
-                seen.add(value);
-            }
-            return value;
-        }, 2);
-    }
+  const seen = new WeakSet();
+  if (pretty) {
     return JSON.stringify(obj, (key, value) => {
-        if (key.startsWith("_")) {
-            return undefined;
-        }
-        if (value instanceof Map) {
-            return Object.fromEntries(value);
-        }
-        if (value instanceof Set) {
-            return Array.from(value);
-        }
-        if (typeof value === "object" && value !== null) {
-            if (seen.has(value)) {
-                return "[Circular]";
-            }
-            seen.add(value);
+      if (key.startsWith("_")) {
+        return undefined;
+      }
+      if (value instanceof Map) {
+        return Object.fromEntries(value);
+      }
+      if (value instanceof Set) {
+        return Array.from(value);
+      }
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) {
+          return "[Circular]";
         }
-        return value;
-    });
+        seen.add(value);
+      }
+      return value;
+    }, 2);
+  }
+  return JSON.stringify(obj, (key, value) => {
+    if (key.startsWith("_")) {
+      return undefined;
+    }
+    if (value instanceof Map) {
+      return Object.fromEntries(value);
+    }
+    if (value instanceof Set) {
+      return Array.from(value);
+    }
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return "[Circular]";
+      }
+      seen.add(value);
+    }
+    return value;
+  });
 }
 export function safeJsonParse(json) {
-    return JSON.parse(json);
+  return JSON.parse(json);
 }

package/dist/utils/useReducedMotion.js

@@ -5,39 +5,41 @@ let reducedMotion = true;
 let generation = 0;
 let subscription;
 function publish(enabled) {
-    if (reducedMotion === enabled)
-        return;
-    reducedMotion = enabled;
-    for (const listener of [...listeners])
-        listener();
+  if (reducedMotion === enabled) return;
+  reducedMotion = enabled;
+  for (const listener of [...listeners]) listener();
 }
 function subscribe(listener) {
-    listeners.add(listener);
-    if (listeners.size === 1) {
-        const request = ++generation;
-        let receivedChange = false;
-        subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", (enabled) => {
-            receivedChange = true;
-            publish(enabled);
-        });
-        AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
-            if (request === generation && !receivedChange)
-                publish(enabled);
-        }, (error) => {
-            if (request === generation)
-                console.warn("[useReducedMotion] Could not read accessibility preference", error);
-        });
+  listeners.add(listener);
+  if (listeners.size === 1) {
+    const request = ++generation;
+    let receivedChange = false;
+    subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", enabled => {
+      receivedChange = true;
+      publish(enabled);
+    });
+    AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
+      if (request === generation && !receivedChange) publish(enabled);
+    }, error => {
+      if (request === generation) console.warn("[useReducedMotion] Could not read accessibility preference", error);
+    });
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      generation += 1;
+      subscription?.remove();
+      subscription = undefined;
+      reducedMotion = true;
     }
-    return () => {
-        listeners.delete(listener);
-        if (listeners.size === 0) {
-            generation += 1;
-            subscription?.remove();
-            subscription = undefined;
-            reducedMotion = true;
-        }
-    };
+  };
 }
 export function useReducedMotion() {
-    return useSyncExternalStore(subscribe, () => reducedMotion, () => true);
+  return useSyncExternalStore(subscribe, _temp, _temp2);
+}
+function _temp2() {
+  return true;
+}
+function _temp() {
+  return reducedMotion;
 }

package/dist/views/AppSplashView.js

@@ -1,10 +1,124 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import ExpoImage from "../Display/Display.ExpoImage.js";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import { Pattern } from "../Display/Display.Pattern.js";
 import Spinner from "../Feedback/Feedback.Spinner.js";
+import { ON_DARK_SURFACE } from "../theme/on-dark-surface.js";
 import { View } from "react-native";
-export function AppSplashView({ background, logo, loadingVariant = "dots", loader, style, }) {
-    return (_jsxs(GradientSurface, { className: "flex-1", colors: background?.colors, end: background?.end, padding: "none", preset: background?.surface ?? "night-green", radius: "none", start: background?.start, style: { flex: 1, ...style }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsxs(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: [logo ? (_jsx(ExpoImage, { contentFit: "contain", source: logo, style: { width: 140, height: 140, marginBottom: 40 } })) : null, loader ?? (_jsx(Spinner, { color: "rgba(255,255,255,0.9)", size: "large", variant: loadingVariant }))] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+export function AppSplashView(t0) {
+  const $ = _c(21);
+  const {
+    background,
+    logo,
+    loadingVariant: t1,
+    loader,
+    style
+  } = t0;
+  const loadingVariant = t1 === undefined ? "dots" : t1;
+  const t2 = background?.colors;
+  const t3 = background?.end;
+  const t4 = background?.surface ?? "night-green";
+  const t5 = background?.start;
+  let t6;
+  if ($[0] !== style) {
+    t6 = {
+      flex: 1,
+      ...style
+    };
+    $[0] = style;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  let t7;
+  if ($[2] !== background) {
+    t7 = background?.pattern ? _jsx(Pattern, {
+      color: background.patternColor ?? ON_DARK_SURFACE.ink,
+      kind: background.pattern,
+      opacity: background.patternOpacity ?? 0.18
+    }) : null;
+    $[2] = background;
+    $[3] = t7;
+  } else {
+    t7 = $[3];
+  }
+  let t8;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[4] = t8;
+  } else {
+    t8 = $[4];
+  }
+  let t9;
+  if ($[5] !== logo) {
+    t9 = logo ? _jsx(ExpoImage, {
+      contentFit: "contain",
+      source: logo,
+      style: {
+        width: 140,
+        height: 140,
+        marginBottom: 40
+      }
+    }) : null;
+    $[5] = logo;
+    $[6] = t9;
+  } else {
+    t9 = $[6];
+  }
+  let t10;
+  if ($[7] !== loader || $[8] !== loadingVariant) {
+    t10 = loader ?? _jsx(Spinner, {
+      color: ON_DARK_SURFACE.ink,
+      size: "large",
+      variant: loadingVariant
+    });
+    $[7] = loader;
+    $[8] = loadingVariant;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  let t11;
+  if ($[10] !== t10 || $[11] !== t9) {
+    t11 = _jsxs(View, {
+      style: t8,
+      children: [t9, t10]
+    });
+    $[10] = t10;
+    $[11] = t9;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  let t12;
+  if ($[13] !== t11 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== t7) {
+    t12 = _jsxs(GradientSurface, {
+      className: "flex-1",
+      colors: t2,
+      end: t3,
+      padding: "none",
+      preset: t4,
+      radius: "none",
+      start: t5,
+      style: t6,
+      children: [t7, t11]
+    });
+    $[13] = t11;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t12;
+  } else {
+    t12 = $[20];
+  }
+  return t12;
 }
 export default AppSplashView;

package/dist/views/AuthFormView.d.ts

@@ -1,8 +1,8 @@
 import type { KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
+import type { SafeAreaEdge } from "../layouts/edges.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import type { ImageSource } from "../utils/image.js";
 import { ReactNode } from "react";
-import type { Edge } from "react-native-safe-area-context";
 interface AuthFormProps {
     title?: string;
     description?: string;
@@ -10,9 +10,8 @@ interface AuthFormProps {
     onBack?: () => void;
     FormNode: ReactNode;
     background?: AppBarBackground;
-    edges?: Edge[];
-    keyboardToolbar?: boolean;
-    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
+    edges?: SafeAreaEdge[];
+    keyboardFormProps?: Omit<KeyboardFormProps, "children">;
 }
-declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, edges, keyboardToolbar, keyboardFormProps, }: AuthFormProps): import("react").JSX.Element;
+declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, edges, keyboardFormProps, }: AuthFormProps): import("react").JSX.Element;
 export default AuthFormView;

package/dist/views/AuthFormView.js

@@ -1,21 +1,129 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Display } from "../Display/index.js";
 import AuthContainer from "../layouts/AuthContainer.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const Logo = Display.Logo;
 const Text = Typography.Text;
-function AuthFormView({ title, description, logoSource, onBack, FormNode, background, edges, keyboardToolbar, keyboardFormProps, }) {
-    const renderTitle = () => {
-        if (!title)
-            return null;
-        return (_jsx(Text, { semibold: true, variant: "h4", children: title }));
+function AuthFormView(t0) {
+  const $ = _c(23);
+  const {
+    title,
+    description,
+    logoSource,
+    onBack,
+    FormNode,
+    background,
+    edges,
+    keyboardFormProps
+  } = t0;
+  let t1;
+  if ($[0] !== title) {
+    t1 = () => {
+      if (!title) {
+        return null;
+      }
+      return _jsx(Text, {
+        bold: true,
+        variant: "h3",
+        children: title
+      });
     };
-    const renderDescription = () => {
-        if (!description)
-            return null;
-        return _jsx(Text, { variant: "body", children: description });
+    $[0] = title;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const renderTitle = t1;
+  let t2;
+  if ($[2] !== description) {
+    t2 = () => {
+      if (!description) {
+        return null;
+      }
+      return _jsx(Text, {
+        className: "mt-1 text-text-secondary",
+        variant: "body",
+        children: description
+      });
     };
-    return (_jsx(AuthContainer, { background: background, edges: edges, header: _jsx(Logo, { size: "large", source: logoSource }), keyboardFormProps: keyboardFormProps, keyboardToolbar: keyboardToolbar, onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
+    $[2] = description;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const renderDescription = t2;
+  let t3;
+  if ($[4] !== logoSource) {
+    t3 = _jsx(Logo, {
+      size: "large",
+      source: logoSource
+    });
+    $[4] = logoSource;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== renderTitle) {
+    t4 = renderTitle();
+    $[6] = renderTitle;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== renderDescription) {
+    t5 = renderDescription();
+    $[8] = renderDescription;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t4 || $[11] !== t5) {
+    t6 = _jsxs(View, {
+      className: "mb-6",
+      children: [t4, t5]
+    });
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== FormNode || $[14] !== t6) {
+    t7 = _jsxs(View, {
+      children: [t6, FormNode]
+    });
+    $[13] = FormNode;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== background || $[17] !== edges || $[18] !== keyboardFormProps || $[19] !== onBack || $[20] !== t3 || $[21] !== t7) {
+    t8 = _jsx(AuthContainer, {
+      background: background,
+      edges: edges,
+      header: t3,
+      keyboardFormProps: keyboardFormProps,
+      onBackPress: onBack,
+      children: t7
+    });
+    $[16] = background;
+    $[17] = edges;
+    $[18] = keyboardFormProps;
+    $[19] = onBack;
+    $[20] = t3;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  return t8;
 }
 export default AuthFormView;

package/dist/views/FormViewV2.context.js

@@ -1,28 +1,80 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useMemo, useState } from "react";
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { createContext, useContext, useState } from "react";
 const Context = createContext(null);
-export function FormViewProvider({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, children, }) {
-    const [showRefreshing, setShowRefreshing] = useState(false);
-    return (_jsx(Context.Provider, { value: {
-            name,
-            description,
-            item,
-            isLoading,
-            isEmpty,
-            hasError,
-            errorMessage,
-            readonly,
-            showRefreshing,
-            setShowRefreshing,
-            onRefresh,
-            onRetry,
-            onBack,
-        }, children: children }));
+export function FormViewProvider(t0) {
+  const $ = _c(16);
+  const {
+    name,
+    description,
+    item,
+    isLoading: t1,
+    isEmpty: t2,
+    hasError: t3,
+    errorMessage,
+    readonly: t4,
+    onRefresh,
+    onRetry,
+    onBack,
+    children
+  } = t0;
+  const isLoading = t1 === undefined ? false : t1;
+  const isEmpty = t2 === undefined ? false : t2;
+  const hasError = t3 === undefined ? false : t3;
+  const readonly = t4 === undefined ? false : t4;
+  const [showRefreshing, setShowRefreshing] = useState(false);
+  let t5;
+  if ($[0] !== description || $[1] !== errorMessage || $[2] !== hasError || $[3] !== isEmpty || $[4] !== isLoading || $[5] !== item || $[6] !== name || $[7] !== onBack || $[8] !== onRefresh || $[9] !== onRetry || $[10] !== readonly || $[11] !== showRefreshing) {
+    t5 = {
+      name,
+      description,
+      item,
+      isLoading,
+      isEmpty,
+      hasError,
+      errorMessage,
+      readonly,
+      showRefreshing,
+      setShowRefreshing,
+      onRefresh,
+      onRetry,
+      onBack
+    };
+    $[0] = description;
+    $[1] = errorMessage;
+    $[2] = hasError;
+    $[3] = isEmpty;
+    $[4] = isLoading;
+    $[5] = item;
+    $[6] = name;
+    $[7] = onBack;
+    $[8] = onRefresh;
+    $[9] = onRetry;
+    $[10] = readonly;
+    $[11] = showRefreshing;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const value = t5;
+  let t6;
+  if ($[13] !== children || $[14] !== value) {
+    t6 = _jsx(Context.Provider, {
+      value: value,
+      children: children
+    });
+    $[13] = children;
+    $[14] = value;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  return t6;
 }
 export function useFormView() {
-    const context = useContext(Context);
-    if (!context) {
-        throw new Error("useFormView must be used within FormViewV2");
-    }
-    return context;
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("useFormView must be used within FormViewV2");
+  }
+  return context;
 }

package/dist/views/FormViewV2.d.ts

@@ -1,8 +1,8 @@
 import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
+import type { SafeAreaEdge } from "../layouts/edges.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
 import React, { ReactNode } from "react";
-import type { Edge } from "react-native-safe-area-context";
 interface FormViewProps<T> {
     name: string;
     description?: string;
@@ -17,7 +17,7 @@ interface FormViewProps<T> {
     onRetry?: () => void;
     onBack?: () => void;
     withContainer?: boolean;
-    edges?: Edge[];
+    edges?: SafeAreaEdge[];
     children: ReactNode;
 }
 export declare function refreshFormData(onRefresh: (() => Promise<void>) | undefined, onRefreshError: ((error: unknown) => void) | undefined, setShowRefreshing: (value: boolean) => void): Promise<void>;
@@ -57,10 +57,9 @@ declare function HeaderActionsBar({ children }: {
  * Use as a child of `<FormViewV2.Header>` — it lands in the AppBar subheader slot.
  */
 declare function HeaderSegmented<T extends string>(props: SegmentedControlProps<T>): React.JSX.Element;
-declare function Content({ withMargin, keyboardToolbar, keyboardFormProps, children, }: {
+declare function Content({ withMargin, keyboardFormProps, children, }: {
     withMargin?: boolean;
-    keyboardToolbar?: boolean;
-    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
+    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "stickyFooterHeight">;
     children: ReactNode;
 }): React.JSX.Element;
 /** Layout wrapper for a set of Group cards. Content already handles isEmpty/loading states. */