@sincpro/mobile-ui 1.1.0 → 2.0.1

package/dist/branding.d.ts

@@ -1,3 +1,4 @@
+import type { ImageSource } from "./utils/image.js";
 import { type ImageSourcePropType } from "react-native";
 /**
  * Centralized brand assets. Set once at app boot via `setBranding({ ... })`. Components
@@ -14,14 +15,14 @@ import { type ImageSourcePropType } from "react-native";
  */
 export interface BrandingConfig {
     /** Brand logo (used by `Display.Logo`, `widgets.ScreenHeader`, etc.). */
-    logo?: ImageSourcePropType;
+    logo?: ImageSource;
     /** Brand symbol / icon used by `Display.Pattern kind="mesh"` as the tiled texture. */
     mesh?: ImageSourcePropType;
     /** Tile size in px (overrides `theme.pattern.size` for the brand mesh). */
     meshSize?: number;
 }
 export declare function setBranding(config: BrandingConfig): void;
-export declare function getBrandingLogo(): ImageSourcePropType | undefined;
+export declare function getBrandingLogo(): ImageSource | undefined;
 export declare function getBrandingMesh(): ImageSourcePropType | undefined;
 export declare function getBrandingMeshSize(): number | undefined;
 /** Test-only — reset to initial empty state. Not part of the public API. */

package/dist/primitives/BaseButton.d.ts

@@ -11,18 +11,18 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
         true: "opacity-70";
     };
-}, undefined, "rounded-md items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-md items-center justify-center flex-row min-h-[48px]", {
     variant: {
         primary: "bg-accent";
         accent: "bg-transparent";
@@ -31,12 +31,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -51,12 +51,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -131,7 +131,6 @@ export interface BaseButtonProps extends VariantProps<typeof button>, Accessibil
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;
-    accessibleSizing?: boolean;
     testID?: string;
 }
 export declare const BaseButton: FC<BaseButtonProps>;
@@ -141,7 +140,6 @@ export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon>, Ac
     loading?: boolean;
     disabled?: boolean;
     className?: string;
-    accessibleSizing?: boolean;
     testID?: string;
 }
 export declare const BaseButtonIcon: FC<BaseButtonIconProps>;

package/dist/primitives/BaseButton.js

@@ -8,7 +8,7 @@ import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 // STYLE VARIANTS
 // ============================================================================
 const button = tv({
-    base: "rounded-md items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-md items-center justify-center flex-row min-h-[48px]",
     variants: {
         variant: {
             primary: "bg-accent",
@@ -18,12 +18,12 @@ const button = tv({
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
             flat: "bg-text-primary/10",
-            link: "bg-transparent min-h-0",
+            link: "bg-transparent",
             transparent: "bg-transparent border border-border-light",
         },
         size: {
-            small: "py-1.5 px-3 min-h-[36px]",
-            medium: "py-2.5 px-4 min-h-[44px]",
+            small: "py-1.5 px-3 min-h-[48px]",
+            medium: "py-2.5 px-4 min-h-[48px]",
             large: "py-3 px-5 min-h-[48px]",
         },
         disabled: {
@@ -192,7 +192,7 @@ function getIconSize(size) {
 function getTextVariant(size) {
     return textVariantMap[size] ?? "button";
 }
-export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, accessibleSizing = false, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
+export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const textColorClass = textColor({
         variant: variant ?? "primary",
         disabled,
@@ -204,17 +204,15 @@ export const BaseButton = ({ title, onPress, variant = "primary", size = "medium
                 ...accessibilityState,
                 disabled: disabled || loading,
                 busy: loading,
-            }, style: accessibleSizing
-                ? { minHeight: 48, minWidth: 48, justifyContent: "center" }
-                : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
+            }, style: { minHeight: 48, minWidth: 48, justifyContent: "center" }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, style: { flexShrink: 1 }, variant: textVariantValue, children: title })) }));
     }
     return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
             ...accessibilityState,
             disabled: disabled || loading,
             busy: loading,
-        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, semibold: variant === "primary", variant: textVariantValue, children: title }))] }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, semibold: variant === "primary", style: { flexShrink: 1 }, variant: textVariantValue, children: title }))] }));
 };
-export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, accessibleSizing = false, testID, accessibilityState, ...accessibilityProps }) => {
+export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibilityState, ...accessibilityProps }) => {
     const iconColorValue = getIconColor(variant ?? "primary", disabled);
     const loadingColorValue = getLoadingColor(variant ?? "primary");
     const iconSizeValue = getIconSize(size ?? "medium");
@@ -222,7 +220,7 @@ export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "med
             ...accessibilityState,
             disabled: disabled || loading,
             busy: loading,
-        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 // ============================================================================
 // COMPOUND COMPONENT

package/dist/theme/typography.d.ts

@@ -436,7 +436,7 @@ export declare const Typography: {
             readonly letterSpacing: 0;
         };
     };
-    readonly variantFontRole: Record<"label" | "button" | "title" | "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyReadable" | "bodyLarge" | "body" | "bodySmall" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
+    readonly variantFontRole: Record<"display" | "label" | "button" | "title" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyReadable" | "bodyLarge" | "body" | "bodySmall" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
     readonly createTextStyle: (variant: keyof typeof typographyVariants, overrides?: Partial<TextStyle>) => TextStyle;
     readonly createCustomTextStyle: (fontSize: keyof typeof fontSizes, fontFamily: keyof typeof fontFamilies, options?: {
         lineHeight?: keyof typeof lineHeights;

package/dist/utils/image.d.ts

@@ -0,0 +1,3 @@
+import type { ImageProps } from "expo-image";
+export type ImageSource = NonNullable<ImageProps["source"]>;
+export declare function imageSourceKey(source: ImageProps["source"]): string | undefined;

package/dist/utils/image.js

@@ -0,0 +1,13 @@
+const sharedSourceKeys = new WeakMap();
+let nextSharedSourceKey = 0;
+export function imageSourceKey(source) {
+    if (source && typeof source === "object" && "nativeRefType" in source) {
+        let key = sharedSourceKeys.get(source);
+        if (key === undefined) {
+            key = nextSharedSourceKey++;
+            sharedSourceKeys.set(source, key);
+        }
+        return `shared-image-${key}`;
+    }
+    return JSON.stringify(source);
+}

package/dist/utils/keys.d.ts

@@ -0,0 +1 @@
+export declare function uniqueKeys<T>(items: readonly T[], keyExtractor: (item: T, index: number) => string, component: string): string[];

package/dist/utils/keys.js

@@ -0,0 +1,7 @@
+export function uniqueKeys(items, keyExtractor, component) {
+    const keys = items.map(keyExtractor);
+    if (keys.some((key) => typeof key !== "string" || !key.trim()) ||
+        new Set(keys).size !== keys.length)
+        throw new Error(`${component} requires unique, non-empty string keys.`);
+    return keys;
+}

package/dist/utils/progress.d.ts

@@ -0,0 +1 @@
+export declare function normalizeProgress(value: number): number;

package/dist/utils/progress.js

@@ -0,0 +1,5 @@
+export function normalizeProgress(value) {
+    if (!Number.isFinite(value))
+        throw new RangeError("Progress value must be a finite number");
+    return Math.max(0, Math.min(1, value));
+}

package/dist/utils/reorder.js

@@ -1,9 +1,6 @@
+import { uniqueKeys } from "./keys.js";
 export function reorderKeys(items, keyExtractor) {
-    const keys = items.map(keyExtractor);
-    if (keys.some((key) => typeof key !== "string" || !key.trim()) ||
-        new Set(keys).size !== keys.length)
-        throw new Error("ReorderableList requires unique, non-empty string keys.");
-    return keys;
+    return uniqueKeys(items, keyExtractor, "ReorderableList");
 }
 export function sameOrder(left, right) {
     return left.length === right.length && left.every((key, index) => key === right[index]);

package/dist/utils/useReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare function useReducedMotion(): boolean;

package/dist/utils/useReducedMotion.js

@@ -0,0 +1,43 @@
+import { useSyncExternalStore } from "react";
+import { AccessibilityInfo } from "react-native";
+const listeners = new Set();
+let reducedMotion = true;
+let generation = 0;
+let subscription;
+function publish(enabled) {
+    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);
+        });
+    }
+    return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            generation += 1;
+            subscription?.remove();
+            subscription = undefined;
+            reducedMotion = true;
+        }
+    };
+}
+export function useReducedMotion() {
+    return useSyncExternalStore(subscribe, () => reducedMotion, () => true);
+}

package/dist/utils/useSheetTranslation.d.ts

@@ -0,0 +1,5 @@
+import { Animated } from "react-native";
+export declare function useSheetTranslation(visible: boolean, hiddenOffset?: number): {
+    translateY: Animated.Value;
+    reducedMotion: boolean;
+};

package/dist/utils/useSheetTranslation.js

@@ -0,0 +1,23 @@
+import { useReducedMotion } from "./useReducedMotion.js";
+import { useEffect, useState } from "react";
+import { Animated } from "react-native";
+export function useSheetTranslation(visible, hiddenOffset = 800) {
+    const reducedMotion = useReducedMotion();
+    const [translateY] = useState(() => new Animated.Value(visible ? 0 : hiddenOffset));
+    useEffect(() => {
+        translateY.stopAnimation();
+        if (visible && !reducedMotion) {
+            const animation = Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            });
+            animation.start();
+            return () => animation.stop();
+        }
+        translateY.setValue(visible ? 0 : hiddenOffset);
+        return () => translateY.stopAnimation();
+    }, [visible, hiddenOffset, reducedMotion, translateY]);
+    return { translateY, reducedMotion };
+}

package/dist/views/AppSplashView.d.ts

@@ -1,12 +1,13 @@
 import { type SpinnerVariant } from "../Feedback/Feedback.Spinner.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType, type ViewStyle } from "react-native";
+import { type ViewStyle } from "react-native";
 export interface AppSplashViewProps {
     /** Gradient + pattern background. Defaults to `night-green` preset. */
     background?: AppBarBackground;
     /** App logo shown centered above the loading indicator. */
-    logo?: ImageSourcePropType;
+    logo?: ImageSource;
     /** Built-in loading animation variant. Ignored when `loader` is provided. Defaults to `"dots"`. */
     loadingVariant?: SpinnerVariant;
     /** Fully custom loading element. Takes precedence over `loadingVariant`. */

package/dist/views/AppSplashView.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-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 { Image, View } from "react-native";
+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(Image, { source: logo, style: { width: 140, height: 140, resizeMode: "contain", marginBottom: 40 } })) : null, loader ?? (_jsx(Spinner, { color: "rgba(255,255,255,0.9)", size: "large", variant: loadingVariant }))] })] }));
+    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 }))] })] }));
 }
 export default AppSplashView;

package/dist/views/AuthFormView.d.ts

@@ -1,11 +1,11 @@
 import type { KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
+import type { ImageSource } from "../utils/image.js";
 import { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 interface AuthFormProps {
     title?: string;
     description?: string;
-    logoSource?: ImageSourcePropType;
+    logoSource?: ImageSource;
     onBack?: () => void;
     FormNode: ReactNode;
     background?: AppBarBackground;

package/dist/views/FormViewV2.d.ts

@@ -1,8 +1,8 @@
 import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
+import type { ImageSource } from "../utils/image.js";
 import React, { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {
     name: string;
     description?: string;
@@ -41,7 +41,7 @@ interface HeaderProps {
      */
     background?: AppBarBackground;
     /** @deprecated Pass `variant` prop instead. */
-    logoSource?: ImageSourcePropType;
+    logoSource?: ImageSource;
 }
 declare function Header({ variant, tone, actions, children, topSpacing, background, }: HeaderProps): React.JSX.Element;
 declare function HeaderActions({ children }: {

package/dist/views/ListViewV2.context.d.ts

@@ -17,8 +17,9 @@ interface ListViewContextValue<T> {
     onBack?: () => void;
     onLoadMore?: () => void;
     loadingMore?: boolean;
+    hasMore: boolean;
 }
-export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, children, }: {
+export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, children, }: {
     name: string;
     description?: string;
     items: T[];
@@ -34,6 +35,7 @@ export declare function ListViewProvider<T>({ name, description, items, isLoadin
     onBack?: () => void;
     onLoadMore?: () => void;
     loadingMore?: boolean;
+    hasMore?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function useListView<T>(): ListViewContextValue<T>;

package/dist/views/ListViewV2.context.js

@@ -1,27 +1,47 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 const Context = createContext(null);
-export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, children, }) {
+export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, hasMore = true, children, }) {
     const [showRefreshing, setShowRefreshing] = useState(false);
-    return (_jsx(Context.Provider, { value: {
-            name,
-            description,
-            items,
-            isLoading,
-            hasError,
-            errorMessage,
-            readonly,
-            showRefreshing,
-            setShowRefreshing,
-            onRefresh,
-            onRetry,
-            onPressItem,
-            onDeleteItem,
-            onSearch,
-            onBack,
-            onLoadMore,
-            loadingMore,
-        }, children: children }));
+    const value = useMemo(() => ({
+        name,
+        description,
+        items,
+        isLoading,
+        hasError,
+        errorMessage,
+        readonly,
+        showRefreshing,
+        setShowRefreshing,
+        onRefresh,
+        onRetry,
+        onPressItem,
+        onDeleteItem,
+        onSearch,
+        onBack,
+        onLoadMore,
+        loadingMore,
+        hasMore,
+    }), [
+        name,
+        description,
+        items,
+        isLoading,
+        hasError,
+        errorMessage,
+        readonly,
+        showRefreshing,
+        onRefresh,
+        onRetry,
+        onPressItem,
+        onDeleteItem,
+        onSearch,
+        onBack,
+        onLoadMore,
+        loadingMore,
+        hasMore,
+    ]);
+    return _jsx(Context.Provider, { value: value, children: children });
 }
 export function useListView() {
     const context = useContext(Context);

package/dist/views/ListViewV2.d.ts

@@ -1,8 +1,9 @@
 import { type SearchHistoryProps } from "../Display/Display.SearchHistory.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
-import React, { ReactNode } from "react";
-import { type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+import { IRowItem } from "./types/IListView.js";
+import React, { ReactNode, type Ref } from "react";
+import { FlatList, type FlatListProps, type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
     name: string;
     description?: string;
@@ -22,12 +23,13 @@ interface ListViewProps<T> {
     onLoadMore?: () => void;
     /** Show a footer spinner while the next page loads. */
     loadingMore?: boolean;
+    hasMore?: boolean;
     backgroundColor?: string;
     withContainer?: boolean;
     children: ReactNode;
 }
 export declare function refreshListData(onRefresh: (() => Promise<void>) | undefined, onRefreshError: ((error: unknown) => void) | undefined, setShowRefreshing: (value: boolean) => void): Promise<void>;
-declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
 interface HeaderProps {
     /** AppBar display variant. `large` = big title (list/index). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
@@ -82,14 +84,20 @@ declare function FilterChips({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
 type ListScrollProps = Pick<ScrollViewProps, "keyboardShouldPersistTaps" | "keyboardDismissMode" | "testID">;
-declare function Content({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }: {
+export type ListViewVirtualizationProps = Pick<FlatListProps<IRowItem<unknown>>, "initialNumToRender" | "maxToRenderPerBatch" | "windowSize" | "updateCellsBatchingPeriod" | "removeClippedSubviews" | "extraData" | "getItemLayout" | "onViewableItemsChanged" | "viewabilityConfig" | "onEndReachedThreshold" | "maintainVisibleContentPosition">;
+interface ListContentOptions {
+    listProps?: ListViewVirtualizationProps;
+    listRef?: Ref<FlatList<IRowItem<unknown>>>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+}
+declare function Content({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
     children?: (item: any) => ReactNode;
     withMargin?: boolean;
-} & ListScrollProps): React.JSX.Element;
-declare function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }: {
+} & ListScrollProps & ListContentOptions): React.JSX.Element;
+declare function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
     children?: (item: any) => ReactNode;
     contentWithMargin: boolean;
-} & ListScrollProps): React.JSX.Element;
+} & ListScrollProps & ListContentOptions): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;