@sincpro/mobile-ui 1.1.0 → 2.0.1

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;
 }

package/dist/widgets/CollectionOptions.js

@@ -7,6 +7,7 @@ import Pressable from "../primitives/Pressable.js";
 import { themeToVars, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { describeCriteria, moveCollectionEntry, validateCriteria, } from "../utils/criteria.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import FilterBuilder from "./FilterBuilder.js";
 import QueryChoice from "./QueryChoice.js";
 import { vars } from "nativewind";
@@ -24,6 +25,7 @@ const sections = [
 ];
 function OptionsEditor({ value, fields, sortFields = [], groupFields = [], savedQueries = [], onApply, onClose, onSave, title = "Configurar colección", testID, }) {
     const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
     const [draft, setDraft] = useState(value);
     const [section, setSection] = useState("filter");
@@ -56,7 +58,7 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
             }),
         }
         : { ...current, groupBy: next });
-    return (_jsx(Modal, { animationType: "slide", onRequestClose: close, presentationStyle: "fullScreen", visible: true, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: close, style: [
+    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "slide", onRequestClose: close, presentationStyle: "fullScreen", visible: true, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: close, style: [
                 vars(themeToVars(theme)),
                 {
                     flex: 1,
@@ -64,7 +66,7 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
                     paddingTop: insets.top,
                     paddingBottom: insets.bottom,
                 },
-            ], testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between gap-3 px-4", children: [_jsx(Typography.Text, { accessibilityRole: "header", semibold: true, style: { flex: 1, minWidth: 0 }, variant: "bodyReadable", children: title }), _jsx(IconButton, { accessibilityLabel: "Cancelar configuraci\u00F3n", accessibleSizing: true, disabled: saving, icon: "close", onPress: close })] }), _jsx(View, { accessibilityRole: "tablist", className: "flex-row flex-wrap px-4 gap-2", children: sections.map((item) => (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "tab", accessibilityState: {
+            ], testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between gap-3 px-4", children: [_jsx(Typography.Text, { accessibilityRole: "header", semibold: true, style: { flex: 1, minWidth: 0 }, variant: "bodyReadable", children: title }), _jsx(IconButton, { accessibilityLabel: "Cancelar configuraci\u00F3n", disabled: saving, icon: "close", onPress: close })] }), _jsx(View, { accessibilityRole: "tablist", className: "flex-row flex-wrap px-4 gap-2", children: sections.map((item) => (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "tab", accessibilityState: {
                             selected: item.id === section,
                             disabled: editing || saving,
                         }, disabled: editing || saving, onPress: () => {
@@ -75,11 +77,11 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
                         }, style: { minHeight: 48, justifyContent: "center", paddingHorizontal: 8 }, children: _jsx(Typography.Text, { className: section === item.id ? "text-text-accent" : "text-text-secondary", semibold: section === item.id, variant: "bodyLarge", children: item.label }) }, item.id))) }), _jsxs(KeyboardForm, { contentContainerStyle: { padding: 16, gap: 16 }, children: [!editing ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodyLarge", children: describeCriteria(draft.filter, fields) })) : null, section === "filter" ? (_jsx(FilterBuilder, { fields: fields, onChange: (filter) => {
                                 setError(undefined);
                                 setDraft({ ...draft, filter });
-                            }, onEditingChange: setEditing, value: draft.filter })) : section === "saved" ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { variant: "bodyReadable", children: "Una configuraci\u00F3n incluye b\u00FAsqueda, condiciones, orden y niveles de agrupaci\u00F3n. Cargarla todav\u00EDa no modifica la colecci\u00F3n." }), !savedQueries.length ? (_jsx(Typography.Text, { children: "No hay configuraciones guardadas." })) : (savedQueries.map((saved) => (_jsx(Button, { accessibleSizing: true, disabled: saving, onPress: () => {
+                            }, onEditingChange: setEditing, value: draft.filter })) : section === "saved" ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { variant: "bodyReadable", children: "Una configuraci\u00F3n incluye b\u00FAsqueda, condiciones, orden y niveles de agrupaci\u00F3n. Cargarla todav\u00EDa no modifica la colecci\u00F3n." }), !savedQueries.length ? (_jsx(Typography.Text, { children: "No hay configuraciones guardadas." })) : (savedQueries.map((saved) => (_jsx(Button, { disabled: saving, onPress: () => {
                                         setDraft(saved.query);
                                         setError(undefined);
                                         setStatus(`Configuración ${saved.label} cargada. Pulsa Aplicar configuración.`);
-                                    }, title: `Cargar ${saved.label}`, variant: "secondary" }, saved.id)))), onSave ? (_jsxs(_Fragment, { children: [_jsx(Input, { accessibleSizing: true, editable: !saving, label: "Nombre de la configuraci\u00F3n", onChangeText: setLabel, testID: "collection-query-name", value: label }), _jsx(Button, { accessibleSizing: true, loading: saving, onPress: () => {
+                                    }, title: `Cargar ${saved.label}`, variant: "secondary" }, saved.id)))), onSave ? (_jsxs(_Fragment, { children: [_jsx(Input, { editable: !saving, label: "Nombre de la configuraci\u00F3n", onChangeText: setLabel, testID: "collection-query-name", value: label }), _jsx(Button, { loading: saving, onPress: () => {
                                                 const invalid = problem();
                                                 if (invalid || !label.trim()) {
                                                     setError(invalid ?? "Escribe un nombre para guardar.");
@@ -102,7 +104,7 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
                                         : "Los grupos se anidan en este orden. La app aplica los niveles al conjunto completo." }), !ordered.length ? (_jsx(Typography.Text, { children: section === "sort" ? "Sin orden configurado." : "Sin agrupación." })) : null, ordered.map((id, index) => {
                                     const field = available.find((item) => item.id === id);
                                     const sort = draft.sort.find((entry) => entry.field === id);
-                                    return (_jsxs(View, { className: "gap-2 border-b border-border-light pb-3", children: [_jsxs(Typography.Text, { semibold: true, variant: "bodyReadable", children: [index + 1, ". ", field?.label ?? `${id} (no disponible)`] }), section === "sort" ? (_jsx(Button, { accessibleSizing: true, onPress: () => setDraft({
+                                    return (_jsxs(View, { className: "gap-2 border-b border-border-light pb-3", children: [_jsxs(Typography.Text, { semibold: true, variant: "bodyReadable", children: [index + 1, ". ", field?.label ?? `${id} (no disponible)`] }), section === "sort" ? (_jsx(Button, { onPress: () => setDraft({
                                                     ...draft,
                                                     sort: draft.sort.map((entry) => entry.field === id
                                                         ? {
@@ -110,12 +112,12 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
                                                             direction: entry.direction === "asc" ? "desc" : "asc",
                                                         }
                                                         : entry),
-                                                }), title: `${field?.label ?? id}: ${sort?.direction === "asc" ? (field?.ascLabel ?? "Ascendente") : (field?.descLabel ?? "Descendente")}`, variant: "secondary" })) : null, _jsxs(View, { className: "flex-row flex-wrap gap-2", children: [_jsx(Button, { accessibilityLabel: `Subir ${field?.label ?? id}`, accessibleSizing: true, disabled: index === 0, onPress: () => updateOrder(moveCollectionEntry(ordered, index, -1)), title: "Subir", variant: "link" }), _jsx(Button, { accessibilityLabel: `Bajar ${field?.label ?? id}`, accessibleSizing: true, disabled: index === ordered.length - 1, onPress: () => updateOrder(moveCollectionEntry(ordered, index, 1)), title: "Bajar", variant: "link" }), _jsx(Button, { accessibilityLabel: `Quitar ${field?.label ?? id}`, accessibleSizing: true, onPress: () => updateOrder(ordered.filter((key) => key !== id)), title: "Quitar", variant: "link" })] })] }, id));
+                                                }), title: `${field?.label ?? id}: ${sort?.direction === "asc" ? (field?.ascLabel ?? "Ascendente") : (field?.descLabel ?? "Descendente")}`, variant: "secondary" })) : null, _jsxs(View, { className: "flex-row flex-wrap gap-2", children: [_jsx(Button, { accessibilityLabel: `Subir ${field?.label ?? id}`, disabled: index === 0, onPress: () => updateOrder(moveCollectionEntry(ordered, index, -1)), title: "Subir", variant: "link" }), _jsx(Button, { accessibilityLabel: `Bajar ${field?.label ?? id}`, disabled: index === ordered.length - 1, onPress: () => updateOrder(moveCollectionEntry(ordered, index, 1)), title: "Bajar", variant: "link" }), _jsx(Button, { accessibilityLabel: `Quitar ${field?.label ?? id}`, onPress: () => updateOrder(ordered.filter((key) => key !== id)), title: "Quitar", variant: "link" })] })] }, id));
                                 }), available.some((field) => !ordered.includes(field.id)) ? (_jsx(QueryChoice, { label: section === "sort"
                                         ? "Añadir criterio de orden"
                                         : "Añadir nivel de agrupación", onChange: (id) => updateOrder([...ordered, id]), options: available
                                         .filter((field) => !ordered.includes(field.id))
-                                        .map((field) => ({ label: field.label, value: field.id })), value: undefined })) : null] })), status ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", children: status })) : null, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null] }), _jsxs(View, { className: "px-4 py-3 border-t border-border-light gap-2", children: [editing ? (_jsx(Typography.Text, { children: "Guarda o cancela la condici\u00F3n antes de aplicar." })) : null, _jsx(Button, { accessibleSizing: true, disabled: editing || saving, onPress: () => {
+                                        .map((field) => ({ label: field.label, value: field.id })), value: undefined })) : null] })), status ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", children: status })) : null, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null] }), _jsxs(View, { className: "px-4 py-3 border-t border-border-light gap-2", children: [editing ? (_jsx(Typography.Text, { children: "Guarda o cancela la condici\u00F3n antes de aplicar." })) : null, _jsx(Button, { disabled: editing || saving, onPress: () => {
                                 const invalid = problem();
                                 if (invalid) {
                                     setError(invalid);

package/dist/widgets/FilterBar.d.ts

@@ -8,7 +8,7 @@ export interface FilterBarOption {
 export interface FilterBarProps {
     filters: readonly FilterBarOption[];
     onFilterPress: (id: string) => void;
-    search?: Omit<SearchBarProps, "accessibleSizing">;
+    search?: SearchBarProps;
     onOpenFilters?: () => void;
     filtersLabel?: string;
     onClearFilters?: () => void;

package/dist/widgets/FilterBar.js

@@ -10,5 +10,5 @@ export function FilterBar({ filters, onFilterPress, search, onOpenFilters, filte
     const { fontScale } = useWindowDimensions();
     const selectedCount = filters.filter((filter) => filter.selected).length;
     const filterLayout = layout === "auto" ? (fontScale > 1.3 ? "wrap" : "scroll") : layout;
-    return (_jsxs(View, { className: cn("gap-2", className), testID: testID, children: [search || onOpenFilters ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [search ? (_jsx(View, { className: "flex-1 min-w-0", children: _jsx(SearchBar, { ...search, accessibleSizing: true }) })) : null, onOpenFilters ? (_jsx(IconButton, { accessibilityLabel: filtersLabel, accessibleSizing: true, icon: "sliders", onPress: onOpenFilters })) : null] })) : null, _jsx(FilterButtonGroup, { className: "p-0", layout: filterLayout, testID: testID ? `${testID}-options` : undefined, children: filters.map((filter) => (_jsx(FilterButton, { active: filter.selected, disabled: filter.disabled, onPress: () => onFilterPress(filter.id), testID: testID ? `${testID}-${filter.id}` : undefined, title: filter.label, variant: "mobile" }, filter.id))) }), resultsLabel || (selectedCount > 0 && onClearFilters) ? (_jsxs(View, { className: "flex-row flex-wrap items-center justify-between gap-x-3", children: [resultsLabel ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-text-secondary", variant: "bodyLarge", children: resultsLabel })) : null, selectedCount > 0 && onClearFilters ? (_jsx(Pressable, { accessibilityLabel: clearLabel, accessibilityRole: "button", onPress: onClearFilters, style: { minHeight: 48, minWidth: 48, justifyContent: "center" }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodyLarge", children: clearLabel }) })) : null] })) : null] }));
+    return (_jsxs(View, { className: cn("gap-2", className), testID: testID, children: [search || onOpenFilters ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [search ? (_jsx(View, { className: "flex-1 min-w-0", children: _jsx(SearchBar, { ...search }) })) : null, onOpenFilters ? (_jsx(IconButton, { accessibilityLabel: filtersLabel, icon: "sliders", onPress: onOpenFilters })) : null] })) : null, _jsx(FilterButtonGroup, { className: "p-0", layout: filterLayout, testID: testID ? `${testID}-options` : undefined, children: filters.map((filter) => (_jsx(FilterButton, { active: filter.selected, disabled: filter.disabled, onPress: () => onFilterPress(filter.id), testID: testID ? `${testID}-${filter.id}` : undefined, title: filter.label, variant: "mobile" }, filter.id))) }), resultsLabel || (selectedCount > 0 && onClearFilters) ? (_jsxs(View, { className: "flex-row flex-wrap items-center justify-between gap-x-3", children: [resultsLabel ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-text-secondary", variant: "bodyLarge", children: resultsLabel })) : null, selectedCount > 0 && onClearFilters ? (_jsx(Pressable, { accessibilityLabel: clearLabel, accessibilityRole: "button", onPress: onClearFilters, style: { minHeight: 48, minWidth: 48, justifyContent: "center" }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodyLarge", children: clearLabel }) })) : null] })) : null] }));
 }

package/dist/widgets/FilterBuilder.js

@@ -21,7 +21,7 @@ export default function FilterBuilder({ fields, value, onChange, onEditingChange
         current = current?.kind === "group" ? current.children[index] : undefined;
     }
     if (current?.kind !== "group")
-        return (_jsxs(View, { className: className, testID: testID, children: [_jsx(Typography.Text, { accessibilityLiveRegion: "polite", children: "Este grupo ya no est\u00E1 disponible. La configuraci\u00F3n cambi\u00F3." }), _jsx(Button, { accessibleSizing: true, onPress: () => {
+        return (_jsxs(View, { className: className, testID: testID, children: [_jsx(Typography.Text, { accessibilityLiveRegion: "polite", children: "Este grupo ya no est\u00E1 disponible. La configuraci\u00F3n cambi\u00F3." }), _jsx(Button, { onPress: () => {
                         setPath([]);
                         setEditing(null);
                     }, title: "Volver a condiciones", variant: "secondary" })] }));
@@ -71,11 +71,11 @@ export default function FilterBuilder({ fields, value, onChange, onEditingChange
                             values[index] = next;
                             changeCondition({ ...condition, values });
                         };
-                        return field?.type === "choice" ? (_jsx(QueryChoice, { label: label, onChange: update, options: field.options ?? [], value: condition.values[index] }, index)) : field?.type === "date" ? (_jsx(DatePicker, { accessibleSizing: true, label: label, onChange: (date) => update(`${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`), value: parseCriteriaDate(condition.values[index]) }, index)) : (_jsx(Input, { accessibleSizing: true, keyboardType: field?.type === "number" ? "numbers-and-punctuation" : "default", label: label, onChangeText: update, testID: `criteria-value-${index}`, value: condition.values[index] === undefined ||
+                        return field?.type === "choice" ? (_jsx(QueryChoice, { label: label, onChange: update, options: field.options ?? [], value: condition.values[index] }, index)) : field?.type === "date" ? (_jsx(DatePicker, { label: label, onChange: (date) => update(`${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`), value: parseCriteriaDate(condition.values[index]) }, index)) : (_jsx(Input, { keyboardType: field?.type === "number" ? "numbers-and-punctuation" : "default", label: label, onChangeText: update, testID: `criteria-value-${index}`, value: condition.values[index] === undefined ||
                                 Number.isNaN(condition.values[index])
                                 ? ""
                                 : String(condition.values[index]) }, index));
-                    }), error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null, _jsx(Button, { accessibleSizing: true, onPress: () => {
+                    }), error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null, _jsx(Button, { onPress: () => {
                             const next = {
                                 ...condition,
                                 values: field?.type === "number"
@@ -94,18 +94,18 @@ export default function FilterBuilder({ fields, value, onChange, onEditingChange
                                 children[editing.index] = next;
                             changeGroup({ ...group, children });
                             setEditing(null);
-                        }, title: "Guardar condici\u00F3n" }), _jsx(Button, { accessibleSizing: true, onPress: () => setEditing(null), title: "Cancelar condici\u00F3n", variant: "secondary" })] })) : (_jsxs(_Fragment, { children: [path.length ? (_jsx(Button, { accessibleSizing: true, onPress: () => setPath(path.slice(0, -1)), title: "Volver al grupo anterior", variant: "link" })) : null, _jsx(QueryChoice, { label: "Coinciden", onChange: (join) => changeGroup({ ...group, join }), options: [
+                        }, title: "Guardar condici\u00F3n" }), _jsx(Button, { onPress: () => setEditing(null), title: "Cancelar condici\u00F3n", variant: "secondary" })] })) : (_jsxs(_Fragment, { children: [path.length ? (_jsx(Button, { onPress: () => setPath(path.slice(0, -1)), title: "Volver al grupo anterior", variant: "link" })) : null, _jsx(QueryChoice, { label: "Coinciden", onChange: (join) => changeGroup({ ...group, join }), options: [
                             { label: "Todas las condiciones", value: "all" },
                             { label: "Cualquiera de las condiciones", value: "any" },
                             { label: "Ninguna de las condiciones", value: "none" },
-                        ], value: group.join }), !group.children.length ? (_jsx(Typography.Text, { className: "text-text-secondary", children: "Sin condiciones en este grupo." })) : null, group.children.map((child, index) => (_jsxs(View, { className: "border-b border-border-light pb-3 gap-2", children: [_jsx(Typography.Text, { variant: "bodyReadable", children: describeCriteria(child, fields) }), _jsxs(View, { className: "flex-row flex-wrap gap-2", children: [_jsx(Button, { accessibleSizing: true, onPress: () => child.kind === "group"
+                        ], value: group.join }), !group.children.length ? (_jsx(Typography.Text, { className: "text-text-secondary", children: "Sin condiciones en este grupo." })) : null, group.children.map((child, index) => (_jsxs(View, { className: "border-b border-border-light pb-3 gap-2", children: [_jsx(Typography.Text, { variant: "bodyReadable", children: describeCriteria(child, fields) }), _jsxs(View, { className: "flex-row flex-wrap gap-2", children: [_jsx(Button, { onPress: () => child.kind === "group"
                                             ? setPath([...path, index])
                                             : (setError(undefined), setEditing({ index, condition: child })), title: child.kind === "group"
                                             ? `Abrir grupo ${index + 1}`
-                                            : `Editar condición ${index + 1}`, variant: "secondary" }), _jsx(Button, { accessibleSizing: true, onPress: () => changeGroup({
+                                            : `Editar condición ${index + 1}`, variant: "secondary" }), _jsx(Button, { onPress: () => changeGroup({
                                             ...group,
                                             children: group.children.filter((_, position) => position !== index),
-                                        }), title: `Eliminar ${child.kind === "group" ? "grupo" : "condición"} ${index + 1}`, variant: "link" })] })] }, index))), _jsx(Button, { accessibleSizing: true, disabled: !fields.some((item) => item.operators.length), onPress: addCondition, title: "A\u00F1adir condici\u00F3n", variant: "secondary" }), _jsx(Button, { accessibleSizing: true, onPress: () => {
+                                        }), title: `Eliminar ${child.kind === "group" ? "grupo" : "condición"} ${index + 1}`, variant: "link" })] })] }, index))), _jsx(Button, { disabled: !fields.some((item) => item.operators.length), onPress: addCondition, title: "A\u00F1adir condici\u00F3n", variant: "secondary" }), _jsx(Button, { onPress: () => {
                             changeGroup({
                                 ...group,
                                 children: [...group.children, { kind: "group", join: "any", children: [] }],

package/dist/widgets/HomeHeader.d.ts

@@ -1,9 +1,9 @@
+import type { ImageSource } from "../utils/image.js";
 import React, { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 interface HomeHeaderProps {
     readonly title?: string;
     readonly logo?: ReactNode;
-    readonly logoSource?: ImageSourcePropType;
+    readonly logoSource?: ImageSource;
     readonly backButton?: boolean;
     readonly onBack?: () => void;
 }

package/dist/widgets/PromoModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
@@ -23,9 +24,10 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
  */
 export function PromoModal({ visible, onDismiss, title, body, icon: Icon, headerGradient, ctaLabel, onPressCta, dismissLabel = "Ahora no", badge, accentColor, }) {
     const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
     const accent = accentColor ?? theme.accent;
-    return (_jsxs(Modal, { animationType: "fade", onRequestClose: onDismiss, presentationStyle: "overFullScreen", statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
+    return (_jsxs(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onDismiss, presentationStyle: "overFullScreen", statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
                         flex: 1,
                         backgroundColor: "rgba(0,0,0,0.55)",
                         alignItems: "center",

package/dist/widgets/ScreenHeader.d.ts

@@ -1,4 +1,4 @@
-import { type ImageSourcePropType } from "react-native";
+import type { ImageSource } from "../utils/image.js";
 export declare enum EVariantScreenHeader {
     FLAT_HEADER = "FLAT_HEADER",
     ROUNDED_HEADER = "ROUNDED_HEADER",
@@ -11,7 +11,7 @@ interface ScreenHeaderProps {
     centerTitle?: boolean;
     subtitle?: string;
     logo?: boolean;
-    logoSource?: ImageSourcePropType;
+    logoSource?: ImageSource;
     rightComponent?: React.ReactNode;
     children?: React.ReactNode;
     withGradientContainer?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "1.1.0",
+  "version": "2.0.1",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -9,6 +9,7 @@
   },
   "files": [
     "dist",
+    "assets",
     "tailwind.preset.js",
     "README.md"
   ],
@@ -22,6 +23,7 @@
     "./Dialog/NativeSheet": "./dist/Dialog/Dialog.NativeSheet.js",
     "./Actions": "./dist/Actions/index.js",
     "./Display": "./dist/Display/index.js",
+    "./Display/ExpoImage": "./dist/Display/Display.ExpoImage.js",
     "./Feedback": "./dist/Feedback/index.js",
     "./Form": "./dist/Form/index.js",
     "./Navigation": "./dist/Navigation/index.js",
@@ -63,6 +65,7 @@
     "expo-checkbox": ">=58.0.0",
     "expo-clipboard": ">=58.0.0",
     "expo-linear-gradient": ">=58.0.0",
+    "expo-image": ">=58.0.0",
     "expo-localization": ">=58.0.0",
     "nativewind": ">=4.2.7",
     "react": ">=19.3",
@@ -124,6 +127,7 @@
     "expo-checkbox": "~58.0.2",
     "expo-clipboard": "~58.0.4",
     "expo-font": "~58.0.11",
+    "expo-image": "~58.0.18",
     "expo-linear-gradient": "~58.0.3",
     "expo-localization": "~58.0.5",
     "expo-status-bar": "~58.0.4",