@sincpro/mobile-ui 1.1.0 → 2.0.0

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;

package/dist/views/ListViewV2.js

@@ -11,7 +11,7 @@ import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { ListViewProvider, useListView } from "./ListViewV2.context.js";
 import { toRowItems } from "./types/IListView.js";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
 import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
 const RefreshErrorContext = createContext(undefined);
 export async function refreshListData(onRefresh, onRefreshError, setShowRefreshing) {
@@ -32,13 +32,13 @@ export async function refreshListData(onRefresh, onRefreshError, setShowRefreshi
         setShowRefreshing(false);
     }
 }
-function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, backgroundColor, withContainer = true, children, }) {
+function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, hasMore = true, backgroundColor, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
     const wrapperProps = withContainer
         ? { edges: ["bottom", "left", "right"] }
         : { className: "flex-1 bg-bg-page" };
     // Propagate contentWithMargin to ContentList via context
-    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isLoading: isLoading, items: items, loadingMore: loadingMore, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onLoadMore: onLoadMore, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
+    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, hasMore: hasMore, isLoading: isLoading, items: items, loadingMore: loadingMore, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onLoadMore: onLoadMore, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
 }
 function Header({ variant = "large", tone, actions, children, background, topSpacing, }) {
     const { name, description, onBack } = useListView();
@@ -48,6 +48,10 @@ function HeaderSearch({ searchQuery = "" }) {
     const { name, onSearch } = useListView();
     const [query, setQuery] = useState(searchQuery);
     const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+    const onSearchRef = React.useRef(onSearch);
+    useEffect(() => {
+        onSearchRef.current = onSearch;
+    }, [onSearch]);
     useEffect(() => {
         const timeout = setTimeout(() => {
             setDebouncedQuery(query);
@@ -55,10 +59,10 @@ function HeaderSearch({ searchQuery = "" }) {
         return () => clearTimeout(timeout);
     }, [query]);
     useEffect(() => {
-        if (onSearch && debouncedQuery !== undefined) {
-            onSearch(debouncedQuery);
+        if (debouncedQuery !== undefined) {
+            onSearchRef.current?.(debouncedQuery);
         }
-    }, [debouncedQuery, onSearch]);
+    }, [debouncedQuery]);
     if (!onSearch) {
         return null;
     }
@@ -114,7 +118,10 @@ function FilterChip({ label, active = false, onPress }) {
 function FilterChips({ children }) {
     return (_jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, gap: 8 }, horizontal: true, showsHorizontalScrollIndicator: false, style: { flexGrow: 0 }, children: children }));
 }
-function Content({ children, withMargin = true, keyboardShouldPersistTaps = "handled", keyboardDismissMode = "none", testID, }) {
+function rowKey(item) {
+    return String(item.id ?? item.index);
+}
+function Content({ children, withMargin = true, keyboardShouldPersistTaps = "handled", keyboardDismissMode = "none", testID, listProps, listRef, contentContainerStyle, }) {
     const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
@@ -126,25 +133,31 @@ function Content({ children, withMargin = true, keyboardShouldPersistTaps = "han
         return _jsx(Feedback.Loading, { message: `Cargando ${name}...` });
     }
     if (hasError) {
-        return (_jsx(ScrollView, { contentContainerStyle: {
-                flexGrow: 1,
-                justifyContent: "center",
-                alignItems: "center",
-                paddingBottom: bottomInset,
-            }, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, testID: testID, children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
+        return (_jsx(ScrollView, { contentContainerStyle: [
+                {
+                    flexGrow: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    paddingBottom: bottomInset,
+                },
+                contentContainerStyle,
+            ], keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, testID: testID, children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
     }
     if (items.length === 0) {
-        return (_jsx(ScrollView, { contentContainerStyle: {
-                flexGrow: 1,
-                justifyContent: "center",
-                alignItems: "center",
-                paddingBottom: bottomInset,
-            }, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, testID: testID, children: _jsx(Feedback.Empty, {}) }));
+        return (_jsx(ScrollView, { contentContainerStyle: [
+                {
+                    flexGrow: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    paddingBottom: bottomInset,
+                },
+                contentContainerStyle,
+            ], keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, testID: testID, children: _jsx(Feedback.Empty, {}) }));
     }
-    return (_jsxs(View, { style: { flex: 1, backgroundColor: theme.bg.page }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentWithMargin: withMargin, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, testID: testID, children: children })] }));
+    return (_jsxs(View, { style: { flex: 1, backgroundColor: theme.bg.page }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentContainerStyle: contentContainerStyle, contentWithMargin: withMargin, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, listProps: listProps, listRef: listRef, testID: testID, children: children })] }));
 }
-function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }) {
-    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, } = useListView();
+function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }) {
+    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, hasMore, } = useListView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
     const rowItems = useMemo(() => toRowItems(items), [items]);
@@ -166,7 +179,15 @@ function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, k
             marginTop: 2,
             paddingHorizontal: contentWithMargin ? 4 : 0,
             backgroundColor: theme.bg.page,
-        }, children: _jsx(FlatList, { contentContainerStyle: bottomInset ? { paddingBottom: bottomInset } : undefined, data: rowItems, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : undefined, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false, testID: testID }) }));
+        }, children: _jsx(FlatList, { ...listProps, contentContainerStyle: [
+                bottomInset ? { paddingBottom: bottomInset } : undefined,
+                contentContainerStyle,
+            ], data: rowItems, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, keyExtractor: rowKey, ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : undefined, onEndReached: onLoadMore
+                ? () => {
+                    if (hasMore && !loadingMore && !showRefreshing)
+                        onLoadMore();
+                }
+                : undefined, onEndReachedThreshold: listProps?.onEndReachedThreshold ?? 0.5, ref: listRef, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false, testID: testID }) }));
 }
 function Footer({ children }) {
     const { items } = useListView();

package/dist/views/types/IListView.js

@@ -15,6 +15,7 @@ export function toRowItem(item, index, mapKeys) {
     if (typeof item === "string" || typeof item === "number") {
         return {
             id: item,
+            index,
             rowTitle: String(item),
             rowSubtitle: undefined,
             readonly: false,
@@ -22,11 +23,11 @@ export function toRowItem(item, index, mapKeys) {
     }
     const rowItem = Object.create(Object.getPrototypeOf(item));
     Object.assign(rowItem, item, {
-        id: item[mapper.id] || "N/A",
-        index: index,
-        rowTitle: item[mapper.rowTitle] || "N/A",
-        rowSubtitle: item[mapper.rowSubtitle] || undefined,
-        readonly: item[mapper.readOnly] || false,
+        id: item[mapper.id] ?? index,
+        index,
+        rowTitle: item[mapper.rowTitle] ?? "N/A",
+        rowSubtitle: item[mapper.rowSubtitle] ?? undefined,
+        readonly: item[mapper.readOnly] ?? false,
     });
     return rowItem;
 }