@sincpro/mobile-ui 1.0.1 → 1.1.0

package/dist/views/ListViewV2.js

@@ -11,15 +11,34 @@ 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 { useCallback, useEffect, useMemo, useState } from "react";
+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();
@@ -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" }) })) : undefined, 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/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;

package/dist/widgets/FilterBuilder.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import Button from "../Actions/Actions.Button.js";
+import DatePicker from "../Form/Form.DatePicker.js";
+import Input from "../Form/Form.Input.js";
+import { Typography } from "../Typography/index.js";
+import { describeCriteria, parseCriteriaDate, replaceCriteria, validateCondition, } from "../utils/criteria.js";
+import QueryChoice from "./QueryChoice.js";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
+export default function FilterBuilder({ fields, value, onChange, onEditingChange, className, testID, }) {
+    const [path, setPath] = useState([]);
+    const [editing, setEditing] = useState(null);
+    const [error, setError] = useState();
+    const isEditing = editing !== null;
+    useEffect(() => {
+        onEditingChange?.(isEditing);
+        return () => onEditingChange?.(false);
+    }, [isEditing, onEditingChange]);
+    let current = value;
+    for (const index of path) {
+        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: () => {
+                        setPath([]);
+                        setEditing(null);
+                    }, title: "Volver a condiciones", variant: "secondary" })] }));
+    const group = current;
+    const changeGroup = (next) => onChange(replaceCriteria(value, path, next));
+    const condition = editing?.condition;
+    const field = fields.find((item) => item.id === condition?.field);
+    const operator = field?.operators.find((item) => item.id === condition?.operator);
+    const changeCondition = (next) => {
+        setError(undefined);
+        setEditing((current) => (current ? { ...current, condition: next } : null));
+    };
+    const addCondition = () => {
+        const first = fields.find((item) => item.operators.length);
+        if (!first)
+            throw new Error("No configurable filter fields");
+        setError(undefined);
+        setEditing({
+            index: null,
+            condition: {
+                kind: "condition",
+                field: first.id,
+                operator: first.operators[0].id,
+                values: [],
+            },
+        });
+    };
+    return (_jsxs(View, { className: className, style: { gap: 16 }, testID: testID, children: [_jsx(Typography.Text, { accessibilityRole: "header", semibold: true, variant: "bodyReadable", children: path.length ? `Grupo ${path.map((index) => index + 1).join(" › ")}` : "Condiciones" }), editing && condition ? (_jsxs(_Fragment, { children: [_jsx(QueryChoice, { label: "Campo", onChange: (id) => {
+                            const next = fields.find((item) => item.id === id);
+                            if (!next?.operators.length)
+                                throw new Error("Field has no operators");
+                            changeCondition({
+                                ...condition,
+                                field: id,
+                                operator: next.operators[0].id,
+                                values: [],
+                            });
+                        }, options: fields
+                            .filter((item) => item.operators.length)
+                            .map((item) => ({ label: item.label, value: item.id })), value: condition.field }), _jsx(QueryChoice, { label: "Comparaci\u00F3n", onChange: (id) => changeCondition({ ...condition, operator: id, values: [] }), options: (field?.operators ?? []).map((item) => ({
+                            label: item.label,
+                            value: item.id,
+                        })), value: condition.operator }), Array.from({ length: operator?.arity === "range" ? 2 : operator?.arity === "one" ? 1 : 0 }, (_, index) => {
+                        const label = operator?.arity === "range" ? (index === 0 ? "Desde" : "Hasta") : "Valor";
+                        const update = (next) => {
+                            const values = [...condition.values];
+                            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 ||
+                                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: () => {
+                            const next = {
+                                ...condition,
+                                values: field?.type === "number"
+                                    ? Array.from(condition.values, (value) => typeof value === "string" && !value.trim() ? NaN : Number(value))
+                                    : condition.values,
+                            };
+                            const problem = validateCondition(next, fields);
+                            if (problem) {
+                                setError(problem);
+                                return;
+                            }
+                            const children = [...group.children];
+                            if (editing.index === null)
+                                children.push(next);
+                            else
+                                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: [
+                            { 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"
+                                            ? 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({
+                                            ...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: () => {
+                            changeGroup({
+                                ...group,
+                                children: [...group.children, { kind: "group", join: "any", children: [] }],
+                            });
+                            setPath([...path, group.children.length]);
+                        }, title: "A\u00F1adir grupo", variant: "secondary" })] }))] }));
+}

package/dist/widgets/QueryChoice.d.ts

@@ -0,0 +1,10 @@
+export interface QueryChoiceProps<T extends string | number | boolean> {
+    label: string;
+    value: T | undefined;
+    options: readonly {
+        label: string;
+        value: T;
+    }[];
+    onChange: (value: T) => void;
+}
+export default function QueryChoice<T extends string | number | boolean>({ label, value, options, onChange, }: QueryChoiceProps<T>): import("react").JSX.Element;

package/dist/widgets/QueryChoice.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { Typography } from "../Typography/index.js";
+import { useState } from "react";
+import { View } from "react-native";
+export default function QueryChoice({ label, value, options, onChange, }) {
+    const [open, setOpen] = useState(false);
+    const selected = options.find((option) => option.value === value);
+    return (_jsxs(View, { className: "gap-1", children: [_jsxs(Pressable, { accessibilityLabel: `${label}: ${selected?.label ?? "Seleccionar"}`, accessibilityState: { expanded: open }, className: "rounded-lg border border-input px-3 py-2", onPress: () => setOpen(!open), style: { minHeight: 48, justifyContent: "center" }, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: label }), _jsxs(Typography.Text, { variant: "bodyReadable", children: [selected?.label ?? "Seleccionar", " ", open ? "−" : "+"] })] }), open ? (_jsx(View, { accessibilityRole: "radiogroup", className: "border-l border-border-default pl-3", children: options.map((option) => (_jsx(Pressable, { accessibilityLabel: option.label, accessibilityRole: "radio", accessibilityState: { checked: option.value === value }, onPress: () => {
+                        onChange(option.value);
+                        setOpen(false);
+                    }, style: { minHeight: 48, justifyContent: "center" }, children: _jsxs(Typography.Text, { className: option.value === value ? "text-text-accent" : "text-text-primary", variant: "bodyReadable", children: [option.value === value ? "✓ " : "", option.label] }) }, String(option.value)))) })) : null] }));
+}

package/dist/widgets/ReorderableList.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type SortableGridProps } from "react-native-sortables";
+export interface ReorderEvent {
+    key: string;
+    fromIndex: number;
+    toIndex: number;
+    source: "drag" | "button";
+}
+export interface ReorderItemContext<T> {
+    item: T;
+    index: number;
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    moveUp: () => void;
+    moveDown: () => void;
+}
+export interface ReorderControlsContext<T> extends ReorderItemContext<T> {
+    dragHandle: ReactNode;
+}
+export interface ReorderableListProps<T> {
+    items: readonly T[];
+    keyExtractor: (item: T) => string;
+    getItemLabel: (item: T) => string;
+    onChange: (items: T[], event: ReorderEvent) => void;
+    renderItem: (context: ReorderItemContext<T>) => ReactNode;
+    renderControls?: (context: ReorderControlsContext<T>) => ReactNode;
+    renderHandleContent?: (context: ReorderItemContext<T>) => ReactNode;
+    disabled?: boolean;
+    className?: string;
+    style?: StyleProp<ViewStyle>;
+    itemStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    controlsStyle?: StyleProp<ViewStyle>;
+    handleStyle?: StyleProp<ViewStyle>;
+    actionStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+    labels?: {
+        drag?: (label: string) => string;
+        up?: (label: string) => string;
+        down?: (label: string) => string;
+        moved?: (label: string, position: number, count: number) => string;
+        changedDuringDrag?: string;
+        disabledDuringDrag?: string;
+    };
+    onDragStart?: (key: string) => void;
+    onDragEnd?: () => void;
+    onReorderRejected?: (reason: "data-changed" | "disabled") => void;
+    sortableProps?: Omit<SortableGridProps<T>, "data" | "renderItem" | "keyExtractor" | "rows" | "rowHeight" | "columns" | "onDragStart" | "onDragEnd" | "onOrderChange" | "sortEnabled" | "customHandle" | "strategy">;
+}
+export default function ReorderableList<T>({ items, keyExtractor, getItemLabel, onChange, renderItem, renderControls, renderHandleContent, disabled, className, style, itemStyle, contentStyle, controlsStyle, handleStyle, actionStyle, testID, labels, onDragStart, onDragEnd, onReorderRejected, sortableProps, }: ReorderableListProps<T>): import("react").JSX.Element;