@sincpro/mobile-ui 0.7.2 → 1.1.0

package/dist/views/FormViewV2.d.ts

@@ -1,5 +1,6 @@
-import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
-import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
+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 React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {
@@ -12,12 +13,14 @@ interface FormViewProps<T> {
     errorMessage?: string;
     readonly?: boolean;
     onRefresh?: () => Promise<void>;
+    onRefreshError?: (error: unknown) => void;
     onRetry?: () => void;
     onBack?: () => void;
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRetry, onBack, withContainer, children, }: FormViewProps<T>): React.JSX.Element;
+export declare function refreshFormData(onRefresh: (() => Promise<void>) | undefined, onRefreshError: ((error: unknown) => void) | undefined, setShowRefreshing: (value: boolean) => void): Promise<void>;
+declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onBack, withContainer, children, }: FormViewProps<T>): React.JSX.Element;
 interface HeaderProps {
     /** AppBar display variant. `large` = big title (list/index screens). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
@@ -53,8 +56,10 @@ declare function HeaderActionsBar({ children }: {
  * Use as a child of `<FormViewV2.Header>` — it lands in the AppBar subheader slot.
  */
 declare function HeaderSegmented<T extends string>(props: SegmentedControlProps<T>): React.JSX.Element;
-declare function Content({ withMargin, children, }: {
+declare function Content({ withMargin, keyboardToolbar, keyboardFormProps, children, }: {
     withMargin?: boolean;
+    keyboardToolbar?: boolean;
+    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
     children: ReactNode;
 }): React.JSX.Element;
 /**

package/dist/views/FormViewV2.js

@@ -1,22 +1,41 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { ErrorBoundary, Feedback } from "../Feedback";
-import { useBottomInset } from "../layouts/BottomInset";
-import Container from "../layouts/Container";
-import { AppBar } from "../Navigation/Navigation.AppBar";
-import { MenuSection } from "../Navigation/Navigation.MenuSection";
-import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { useTheme } from "../theme";
-import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
+import { Display } from "../Display/index.js";
+import { ErrorBoundary, Feedback } from "../Feedback/index.js";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
+import { useBottomInset } from "../layouts/BottomInset.js";
+import Container from "../layouts/Container.js";
+import { AppBar } from "../Navigation/Navigation.AppBar.js";
+import { MenuSection } from "../Navigation/Navigation.MenuSection.js";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl.js";
+import { useTheme } from "../theme/index.js";
+import { FormViewProvider, useFormView } from "./FormViewV2.context.js";
 import React from "react";
 import { RefreshControl, View } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
-function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, withContainer = true, children, }) {
+const RefreshErrorContext = React.createContext(undefined);
+export async function refreshFormData(onRefresh, onRefreshError, setShowRefreshing) {
+    setShowRefreshing(true);
+    try {
+        await onRefresh?.();
+    }
+    catch (error) {
+        console.error("[FormViewV2] Refresh failed", error);
+        try {
+            onRefreshError?.(error);
+        }
+        catch (callbackError) {
+            console.error("[FormViewV2] onRefreshError callback failed", callbackError);
+        }
+    }
+    finally {
+        setShowRefreshing(false);
+    }
+}
+function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onBack, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
     const wrapperProps = withContainer
         ? { edges: ["bottom", "left", "right"] }
         : { style: { flex: 1 } };
-    return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+    return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
 }
 function Header({ variant = "default", tone, actions, children, topSpacing, background, }) {
     const { name, description, onBack } = useFormView();
@@ -36,24 +55,24 @@ function HeaderActionsBar({ children }) {
 function HeaderSegmented(props) {
     return _jsx(SegmentedControl, { ...props });
 }
-function Content({ withMargin = false, children, }) {
+function Content({ withMargin = false, keyboardToolbar = false, keyboardFormProps, children, }) {
     const { name, isLoading, isEmpty, hasError, errorMessage, item, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useFormView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
+    const onRefreshError = React.useContext(RefreshErrorContext);
     const handleRefresh = React.useCallback(async () => {
-        setShowRefreshing(true);
-        if (onRefresh) {
-            await onRefresh();
-        }
-        setShowRefreshing(false);
-    }, [onRefresh, setShowRefreshing]);
+        await refreshFormData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
     const isCenteredContent = isLoading || isEmpty || !item || hasError;
-    return (_jsx(KeyboardAwareScrollView, { bottomOffset: 20, contentContainerStyle: {
-            flexGrow: 1,
-            justifyContent: isCenteredContent ? "center" : "flex-start",
-            alignItems: isCenteredContent ? "center" : "stretch",
-            paddingBottom: bottomInset,
-        }, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { flex: 1, backgroundColor: theme.bg.page }, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
+    return (_jsx(KeyboardForm, { ...keyboardFormProps, contentContainerStyle: [
+            {
+                flexGrow: 1,
+                justifyContent: isCenteredContent ? "center" : "flex-start",
+                alignItems: isCenteredContent ? "center" : "stretch",
+                paddingBottom: bottomInset,
+            },
+            keyboardFormProps?.contentContainerStyle,
+        ], keyboardShouldPersistTaps: keyboardFormProps?.keyboardShouldPersistTaps ?? "handled", refreshControl: keyboardFormProps?.refreshControl ?? (_jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing })), style: [{ flex: 1, backgroundColor: theme.bg.page }, keyboardFormProps?.style], toolbar: keyboardToolbar, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
 }
 /**
  * @deprecated Content already handles isEmpty/!item by rendering Feedback.Empty internally.

package/dist/views/ListViewV2.d.ts

@@ -1,8 +1,8 @@
-import { type SearchHistoryProps } from "../Display/Display.SearchHistory";
-import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
-import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
+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 { StyleProp, ViewStyle } from "react-native";
+import { type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
     name: string;
     description?: string;
@@ -12,6 +12,7 @@ interface ListViewProps<T> {
     errorMessage?: string;
     readonly?: boolean;
     onRefresh?: () => Promise<void>;
+    onRefreshError?: (error: unknown) => void;
     onRetry?: () => void;
     onPressItem?: (item: T) => void;
     onDeleteItem?: (item: T) => void;
@@ -25,7 +26,8 @@ interface ListViewProps<T> {
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
+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;
 interface HeaderProps {
     /** AppBar display variant. `large` = big title (list/index). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
@@ -79,14 +81,15 @@ declare function FilterChip({ label, active, onPress }: FilterChipProps): React.
 declare function FilterChips({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
-declare function Content({ children, withMargin, }: {
+type ListScrollProps = Pick<ScrollViewProps, "keyboardShouldPersistTaps" | "keyboardDismissMode" | "testID">;
+declare function Content({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }: {
     children?: (item: any) => ReactNode;
     withMargin?: boolean;
-}): React.JSX.Element;
-declare function ContentList({ children, contentWithMargin, }: {
+} & ListScrollProps): React.JSX.Element;
+declare function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }: {
     children?: (item: any) => ReactNode;
     contentWithMargin: boolean;
-}): React.JSX.Element;
+} & ListScrollProps): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;

package/dist/views/ListViewV2.js

@@ -1,25 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import SearchHistory from "../Display/Display.SearchHistory";
-import { ErrorBoundary, Feedback } from "../Feedback";
-import { useBottomInset } from "../layouts/BottomInset";
-import Container from "../layouts/Container";
-import { Navigation } from "../Navigation";
-import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { useTheme } from "../theme";
-import { cn, tv } from "../theme/tw";
-import { Typography } from "../Typography";
-import { ListViewProvider, useListView } from "../views/ListViewV2.context";
-import { toRowItems } from "../views/types/IListView";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Display } from "../Display/index.js";
+import SearchHistory from "../Display/Display.SearchHistory.js";
+import { ErrorBoundary, Feedback } from "../Feedback/index.js";
+import { useBottomInset } from "../layouts/BottomInset.js";
+import Container from "../layouts/Container.js";
+import { Navigation } from "../Navigation/index.js";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl.js";
+import { useTheme } from "../theme/index.js";
+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 { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
-function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, backgroundColor, withContainer = true, children, }) {
+const RefreshErrorContext = createContext(undefined);
+export async function refreshListData(onRefresh, onRefreshError, setShowRefreshing) {
+    setShowRefreshing(true);
+    try {
+        await onRefresh?.();
+    }
+    catch (error) {
+        console.error("[ListViewV2] Refresh failed", error);
+        try {
+            onRefreshError?.(error);
+        }
+        catch (callbackError) {
+            console.error("[ListViewV2] onRefreshError callback failed", callbackError);
+        }
+    }
+    finally {
+        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, }) {
     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(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+    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 }) }) }) }));
 }
 function Header({ variant = "large", tone, actions, children, background, topSpacing, }) {
     const { name, description, onBack } = useListView();
@@ -69,12 +88,12 @@ function HeaderSearchHistory(props) {
 function HeaderFilters({ children }) {
     return _jsx(View, { className: "px-4 py-2 items-center", children: children });
 }
-// Modern filter pills (2026): rounded-full, active = accent (green), inactive = muted track.
+// Active filter uses the action color. The capsule is a pill; the rest of the chrome is not.
 const filterChip = tv({
     base: "py-1.5 px-3.5 items-center justify-center rounded-full",
     variants: {
         active: {
-            true: "bg-accent",
+            true: "bg-primary",
             false: "bg-bg-muted",
         },
     },
@@ -83,7 +102,7 @@ const filterChip = tv({
 const filterChipText = tv({
     variants: {
         active: {
-            true: "text-text-inverse font-semibold",
+            true: "text-text-on-primary font-semibold",
             false: "text-text-secondary",
         },
     },
@@ -95,17 +114,14 @@ 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, }) {
+function Content({ children, withMargin = true, keyboardShouldPersistTaps = "handled", keyboardDismissMode = "none", testID, }) {
     const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
+    const onRefreshError = useContext(RefreshErrorContext);
     const handleRefresh = useCallback(async () => {
-        setShowRefreshing(true);
-        if (onRefresh) {
-            await onRefresh();
-        }
-        setShowRefreshing(false);
-    }, [onRefresh, setShowRefreshing]);
+        await refreshListData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
     if (isLoading) {
         return _jsx(Feedback.Loading, { message: `Cargando ${name}...` });
     }
@@ -115,7 +131,7 @@ function Content({ children, withMargin = true, }) {
                 justifyContent: "center",
                 alignItems: "center",
                 paddingBottom: bottomInset,
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
+            }, 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: {
@@ -123,22 +139,19 @@ function Content({ children, withMargin = true, }) {
                 justifyContent: "center",
                 alignItems: "center",
                 paddingBottom: bottomInset,
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Empty, {}) }));
+            }, 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, children: children })] }));
+    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 })] }));
 }
-function ContentList({ children, contentWithMargin, }) {
+function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }) {
     const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, } = useListView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
     const rowItems = useMemo(() => toRowItems(items), [items]);
+    const onRefreshError = useContext(RefreshErrorContext);
     const handleRefresh = useCallback(async () => {
-        setShowRefreshing(true);
-        if (onRefresh) {
-            await onRefresh();
-        }
-        setShowRefreshing(false);
-    }, [onRefresh, setShowRefreshing]);
+        await refreshListData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
     const renderItem = useCallback(({ item }) => {
         if (children) {
             return _jsx(_Fragment, { children: children(item) });
@@ -153,7 +166,7 @@ function ContentList({ children, contentWithMargin, }) {
             marginTop: 2,
             paddingHorizontal: contentWithMargin ? 4 : 0,
             backgroundColor: theme.bg.page,
-        }, children: _jsx(FlatList, { contentContainerStyle: bottomInset ? { paddingBottom: bottomInset } : undefined, data: rowItems, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : null, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
+        }, 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 }) }));
 }
 function Footer({ children }) {
     const { items } = useListView();

package/dist/views/Wizard/Wizard.context.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { ErrorBoundary } from "../../Feedback";
+import { ErrorBoundary } from "../../Feedback/index.js";
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { ActivityIndicator, Text, View } from "react-native";
 const WizardContext = createContext(null);

package/dist/views/Wizard/Wizard.d.ts

@@ -1,4 +1,4 @@
-import type { WizardContextValue, WizardProviderProps, WizardStepId } from "../../views/Wizard/Wizard.context";
+import type { WizardContextValue, WizardProviderProps, WizardStepId } from "./Wizard.context.js";
 import type { FC, ReactNode } from "react";
 export interface WizardStepGuard {
     canEnter?: () => boolean | Promise<boolean>;

package/dist/views/Wizard/Wizard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { useWizard, WizardProvider } from "../../views/Wizard/Wizard.context";
+import { useWizard, WizardProvider } from "./Wizard.context.js";
 import { useEffect } from "react";
 import { TouchableOpacity } from "react-native";
 const WizardRoot = (props) => {

package/dist/views/Wizard/index.d.ts

@@ -1,4 +1,4 @@
-export type { WizardBackProps, WizardGoProps, WizardGuardProps, WizardStepGuard, WizardStepLifecycle, WizardStepProps, } from "../../views/Wizard/Wizard";
-export { Wizard } from "../../views/Wizard/Wizard";
-export type { WizardContextValue, WizardProviderProps, WizardStepId, } from "../../views/Wizard/Wizard.context";
-export { useWizard } from "../../views/Wizard/Wizard.context";
+export type { WizardBackProps, WizardGoProps, WizardGuardProps, WizardStepGuard, WizardStepLifecycle, WizardStepProps, } from "./Wizard.js";
+export { Wizard } from "./Wizard.js";
+export type { WizardContextValue, WizardProviderProps, WizardStepId, } from "./Wizard.context.js";
+export { useWizard } from "./Wizard.context.js";

package/dist/views/Wizard/index.js

@@ -1,2 +1,2 @@
-export { Wizard } from "../../views/Wizard/Wizard";
-export { useWizard } from "../../views/Wizard/Wizard.context";
+export { Wizard } from "./Wizard.js";
+export { useWizard } from "./Wizard.context.js";

package/dist/views/types/IFormView.d.ts

@@ -1,4 +1,4 @@
-import { UIItem } from "../../views/types/UIItem";
+import { UIItem } from "./UIItem.js";
 import { ReactNode } from "react";
 export interface IFormView<T> extends UIItem {
     name: string;

package/dist/views/types/IListView.d.ts

@@ -1,4 +1,4 @@
-import { UICollectionItem, UIItem } from "../../views/types/UIItem";
+import { UICollectionItem, UIItem } from "./UIItem.js";
 import { ReactNode } from "react";
 export type IRowItem<T> = T & UIItem & {
     id: string | number;

package/dist/widgets/CircleButton.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.CircleButton` instead. */
-export type { CircleButtonProps } from "../Display/Display.CircleButton";
-export { CircleButton } from "../Display/Display.CircleButton";
+export type { CircleButtonProps } from "../Display/Display.CircleButton.js";
+export { CircleButton } from "../Display/Display.CircleButton.js";

package/dist/widgets/CircleButton.js

@@ -1 +1 @@
-export { CircleButton } from "../Display/Display.CircleButton";
+export { CircleButton } from "../Display/Display.CircleButton.js";

package/dist/widgets/CollectionOptions.d.ts

@@ -0,0 +1,15 @@
+import { type CollectionField, type CollectionQuery, type CriteriaField, type SavedCollectionQuery } from "../utils/criteria.js";
+export interface CollectionOptionsProps {
+    visible: boolean;
+    value: CollectionQuery;
+    fields: readonly CriteriaField[];
+    sortFields?: readonly CollectionField[];
+    groupFields?: readonly CollectionField[];
+    savedQueries?: readonly SavedCollectionQuery[];
+    onApply: (query: CollectionQuery) => void;
+    onClose: () => void;
+    onSave?: (label: string, query: CollectionQuery) => void | Promise<void>;
+    title?: string;
+    testID?: string;
+}
+export default function CollectionOptions(props: CollectionOptionsProps): import("react").JSX.Element | null;

package/dist/widgets/CollectionOptions.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import Button from "../Actions/Actions.Button.js";
+import IconButton from "../Actions/Actions.IconButton.js";
+import Input from "../Form/Form.Input.js";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
+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 FilterBuilder from "./FilterBuilder.js";
+import QueryChoice from "./QueryChoice.js";
+import { vars } from "nativewind";
+import { useState } from "react";
+import { Keyboard, Modal, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+export default function CollectionOptions(props) {
+    return props.visible ? _jsx(OptionsEditor, { ...props }) : null;
+}
+const sections = [
+    { id: "filter", label: "Filtros" },
+    { id: "sort", label: "Ordenar" },
+    { id: "group", label: "Agrupar" },
+    { id: "saved", label: "Guardados" },
+];
+function OptionsEditor({ value, fields, sortFields = [], groupFields = [], savedQueries = [], onApply, onClose, onSave, title = "Configurar colección", testID, }) {
+    const theme = useTheme();
+    const insets = useSafeAreaInsets();
+    const [draft, setDraft] = useState(value);
+    const [section, setSection] = useState("filter");
+    const [editing, setEditing] = useState(false);
+    const [label, setLabel] = useState("");
+    const [error, setError] = useState();
+    const [status, setStatus] = useState();
+    const [saving, setSaving] = useState(false);
+    const problem = () => validateCriteria(draft.filter, fields) ??
+        (draft.sort.some((sort) => !sortFields.some((field) => field.id === sort.field))
+            ? "El orden contiene un campo no disponible."
+            : undefined) ??
+        (draft.groupBy.some((id) => !groupFields.some((field) => field.id === id))
+            ? "El agrupado contiene un campo no disponible."
+            : undefined);
+    const close = () => {
+        if (!saving) {
+            Keyboard.dismiss();
+            onClose();
+        }
+    };
+    const ordered = section === "sort" ? draft.sort.map((entry) => entry.field) : draft.groupBy;
+    const available = section === "sort" ? sortFields : groupFields;
+    const updateOrder = (next) => setDraft((current) => section === "sort"
+        ? {
+            ...current,
+            sort: next.map((field) => current.sort.find((entry) => entry.field === field) ?? {
+                field,
+                direction: "asc",
+            }),
+        }
+        : { ...current, groupBy: next });
+    return (_jsx(Modal, { animationType: "slide", onRequestClose: close, presentationStyle: "fullScreen", visible: true, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: close, style: [
+                vars(themeToVars(theme)),
+                {
+                    flex: 1,
+                    backgroundColor: theme.bg.page,
+                    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: {
+                            selected: item.id === section,
+                            disabled: editing || saving,
+                        }, disabled: editing || saving, onPress: () => {
+                            Keyboard.dismiss();
+                            setSection(item.id);
+                            setError(undefined);
+                            setStatus(undefined);
+                        }, 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: () => {
+                                        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: () => {
+                                                const invalid = problem();
+                                                if (invalid || !label.trim()) {
+                                                    setError(invalid ?? "Escribe un nombre para guardar.");
+                                                    return;
+                                                }
+                                                setError(undefined);
+                                                setStatus(undefined);
+                                                setSaving(true);
+                                                Promise.resolve()
+                                                    .then(() => onSave(label.trim(), draft))
+                                                    .then(() => {
+                                                    setStatus("Configuración guardada. Pulsa Aplicar configuración para usarla.");
+                                                }, (cause) => {
+                                                    console.error("[CollectionOptions] Save failed", cause);
+                                                    setError("No se pudo guardar. Conservamos la configuración para reintentar.");
+                                                })
+                                                    .finally(() => setSaving(false));
+                                            }, title: "Guardar configuraci\u00F3n" })] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { variant: "bodyReadable", children: section === "sort"
+                                        ? "El primer campo tiene prioridad; los siguientes resuelven empates."
+                                        : "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({
+                                                    ...draft,
+                                                    sort: draft.sort.map((entry) => entry.field === id
+                                                        ? {
+                                                            ...entry,
+                                                            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));
+                                }), 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: () => {
+                                const invalid = problem();
+                                if (invalid) {
+                                    setError(invalid);
+                                    return;
+                                }
+                                Keyboard.dismiss();
+                                onApply(draft);
+                            }, title: "Aplicar configuraci\u00F3n" })] })] }) }));
+}

package/dist/widgets/FilterBar.d.ts

@@ -0,0 +1,21 @@
+import { type SearchBarProps } from "../Navigation/Navigation.SearchBar.js";
+export interface FilterBarOption {
+    id: string;
+    label: string;
+    selected: boolean;
+    disabled?: boolean;
+}
+export interface FilterBarProps {
+    filters: readonly FilterBarOption[];
+    onFilterPress: (id: string) => void;
+    search?: Omit<SearchBarProps, "accessibleSizing">;
+    onOpenFilters?: () => void;
+    filtersLabel?: string;
+    onClearFilters?: () => void;
+    clearLabel?: string;
+    resultsLabel?: string;
+    layout?: "auto" | "scroll" | "wrap";
+    className?: string;
+    testID?: string;
+}
+export declare function FilterBar({ filters, onFilterPress, search, onOpenFilters, filtersLabel, onClearFilters, clearLabel, resultsLabel, layout, className, testID, }: FilterBarProps): import("react").JSX.Element;

package/dist/widgets/FilterBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";
+import IconButton from "../Actions/Actions.IconButton.js";
+import SearchBar from "../Navigation/Navigation.SearchBar.js";
+import Pressable from "../primitives/Pressable.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useWindowDimensions, View } from "react-native";
+export function FilterBar({ filters, onFilterPress, search, onOpenFilters, filtersLabel = "Más filtros", onClearFilters, clearLabel = "Limpiar filtros", resultsLabel, layout = "auto", className, testID, }) {
+    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] }));
+}

package/dist/widgets/FilterBuilder.d.ts

@@ -0,0 +1,10 @@
+import { type CriteriaField, type CriteriaGroup } from "../utils/criteria.js";
+export interface FilterBuilderProps {
+    fields: readonly CriteriaField[];
+    value: CriteriaGroup;
+    onChange: (value: CriteriaGroup) => void;
+    onEditingChange?: (editing: boolean) => void;
+    className?: string;
+    testID?: string;
+}
+export default function FilterBuilder({ fields, value, onChange, onEditingChange, className, testID, }: FilterBuilderProps): import("react").JSX.Element;