@sincpro/mobile-ui 2.0.0 → 3.0.0

package/dist/views/types/IListView.js

@@ -5,15 +5,10 @@ const defaultRowKeys = {
     readOnly: "readonly",
 };
 export function toRowItem(item, index, mapKeys) {
-    let mapper = {};
-    if (!mapKeys) {
-        mapper = defaultRowKeys;
-    }
-    else {
-        mapper = { ...defaultRowKeys, ...mapKeys };
-    }
+    const mapper = { ...defaultRowKeys, ...mapKeys };
     if (typeof item === "string" || typeof item === "number") {
         return {
+            item,
             id: item,
             index,
             rowTitle: String(item),
@@ -21,15 +16,23 @@ export function toRowItem(item, index, mapKeys) {
             readonly: false,
         };
     }
-    const rowItem = Object.create(Object.getPrototypeOf(item));
-    Object.assign(rowItem, item, {
-        id: item[mapper.id] ?? index,
+    if (typeof item !== "object" || item === null) {
+        throw new TypeError("List row items must be strings, numbers or objects");
+    }
+    const id = Reflect.get(item, mapper.id ?? defaultRowKeys.id) ?? index;
+    if (typeof id !== "string" && typeof id !== "number") {
+        throw new TypeError("List row IDs must be strings or numbers");
+    }
+    const title = Reflect.get(item, mapper.rowTitle ?? defaultRowKeys.rowTitle);
+    const subtitle = Reflect.get(item, mapper.rowSubtitle ?? defaultRowKeys.rowSubtitle);
+    return {
+        item,
+        id,
         index,
-        rowTitle: item[mapper.rowTitle] ?? "N/A",
-        rowSubtitle: item[mapper.rowSubtitle] ?? undefined,
-        readonly: item[mapper.readOnly] ?? false,
-    });
-    return rowItem;
+        rowTitle: String(title ?? "N/A"),
+        rowSubtitle: subtitle == null ? undefined : String(subtitle),
+        readonly: Boolean(Reflect.get(item, mapper.readOnly ?? defaultRowKeys.readOnly)),
+    };
 }
 export function toRowItems(items, mapKeys) {
     return items.map((item, index) => toRowItem(item, index, mapKeys));

package/dist/widgets/CollectionOptions.d.ts

@@ -6,10 +6,10 @@ export interface CollectionOptionsProps {
     sortFields?: readonly CollectionField[];
     groupFields?: readonly CollectionField[];
     savedQueries?: readonly SavedCollectionQuery[];
-    onApply: (query: CollectionQuery) => void;
+    onApply: (query: CollectionQuery) => void | Promise<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;
+export default function CollectionOptions(props: CollectionOptionsProps): import("react").JSX.Element;

package/dist/widgets/CollectionOptions.js

@@ -1,32 +1,23 @@
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { Actions } from "../Actions/index.js";
+import Sheet from "../Dialog/Dialog.Sheet.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 { useReducedMotion } from "../utils/useReducedMotion.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;
-}
+import { useRef, useState } from "react";
+import { Keyboard, View } from "react-native";
 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 reducedMotion = useReducedMotion();
-    const insets = useSafeAreaInsets();
+function OptionsEditor({ value, fields, sortFields = [], groupFields = [], savedQueries = [], onApply, onClose, onSave, onPendingChange, }) {
+    const pending = useRef(false);
     const [draft, setDraft] = useState(value);
     const [section, setSection] = useState("filter");
     const [editing, setEditing] = useState(false);
@@ -34,6 +25,7 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
     const [error, setError] = useState();
     const [status, setStatus] = useState();
     const [saving, setSaving] = useState(false);
+    const [applying, setApplying] = 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."
@@ -42,7 +34,7 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
             ? "El agrupado contiene un campo no disponible."
             : undefined);
     const close = () => {
-        if (!saving) {
+        if (!pending.current) {
             Keyboard.dismiss();
             onClose();
         }
@@ -58,53 +50,83 @@ function OptionsEditor({ value, fields, sortFields = [], groupFields = [], saved
             }),
         }
         : { ...current, groupBy: next });
-    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,
-                    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", 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) => {
+    const saveConfiguration = async () => {
+        if (!onSave || pending.current)
+            return;
+        const invalid = problem();
+        if (invalid || !label.trim()) {
+            setError(invalid ?? "Escribe un nombre para guardar.");
+            return;
+        }
+        pending.current = true;
+        setSaving(true);
+        onPendingChange(true);
+        setError(undefined);
+        setStatus(undefined);
+        try {
+            await onSave(label.trim(), draft);
+            setStatus("Configuración guardada. Pulsa Aplicar configuración para usarla.");
+        }
+        catch (cause) {
+            console.error("[CollectionOptions] Save failed", cause);
+            setError("No se pudo guardar. Conservamos la configuración para reintentar.");
+        }
+        finally {
+            pending.current = false;
+            setSaving(false);
+            onPendingChange(false);
+        }
+    };
+    const applyConfiguration = async () => {
+        if (editing || pending.current)
+            return;
+        const invalid = problem();
+        if (invalid) {
+            setError(invalid);
+            return;
+        }
+        pending.current = true;
+        setSaving(true);
+        setApplying(true);
+        onPendingChange(true);
+        setError(undefined);
+        try {
+            await onApply(draft);
+            Keyboard.dismiss();
+            onClose();
+        }
+        catch (cause) {
+            console.error("[CollectionOptions] Apply failed", cause);
+            setError("No se pudo aplicar. Conservamos la configuración para reintentar.");
+        }
+        finally {
+            pending.current = false;
+            setSaving(false);
+            setApplying(false);
+            onPendingChange(false);
+        }
+    };
+    return (_jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_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))) }), _jsx(View, { importantForAccessibility: saving ? "no-hide-descendants" : "auto", pointerEvents: saving ? "none" : "auto", style: { flex: 1, minHeight: 0 }, children: _jsxs(KeyboardForm, { contentContainerStyle: { paddingVertical: 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, { 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(Actions.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, { 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.");
-                                                    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"
+                                    }, 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(Actions.Button, { loading: saving, onPress: () => void saveConfiguration(), 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, { 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(Actions.Button, { onPress: () => setDraft({
                                                     ...draft,
                                                     sort: draft.sort.map((entry) => entry.field === id
                                                         ? {
@@ -112,18 +134,23 @@ 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}`, 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));
+                                                }), 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(Actions.Button, { accessibilityLabel: `Subir ${field?.label ?? id}`, disabled: index === 0, onPress: () => updateOrder(moveCollectionEntry(ordered, index, -1)), title: "Subir", variant: "link" }), _jsx(Actions.Button, { accessibilityLabel: `Bajar ${field?.label ?? id}`, disabled: index === ordered.length - 1, onPress: () => updateOrder(moveCollectionEntry(ordered, index, 1)), title: "Bajar", variant: "link" }), _jsx(Actions.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, { disabled: editing || saving, onPress: () => {
-                                const invalid = problem();
-                                if (invalid) {
-                                    setError(invalid);
-                                    return;
-                                }
-                                Keyboard.dismiss();
-                                onApply(draft);
-                            }, title: "Aplicar configuraci\u00F3n" })] })] }) }));
+                                        .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", accessibilityRole: "alert", className: "pb-3 text-danger", selectable: true, children: error })) : null, _jsxs(View, { className: "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(Actions.Button, { accessibilityLabel: "Cancelar configuraci\u00F3n", disabled: saving, onPress: close, title: "Cancelar", variant: "secondary" }), _jsx(Actions.Button, { disabled: editing || saving, loading: applying, onPress: () => void applyConfiguration(), title: "Aplicar configuraci\u00F3n" })] })] }));
+}
+export default function CollectionOptions(props) {
+    const busy = useRef(false);
+    const [pending, setPending] = useState(false);
+    return (_jsx(Sheet, { dismissible: !pending, onClose: () => {
+            if (!busy.current) {
+                Keyboard.dismiss();
+                props.onClose();
+            }
+        }, scrollable: false, testID: props.testID, title: props.title ?? "Configurar colección", visible: props.visible, children: props.visible ? (_jsx(OptionsEditor, { ...props, onPendingChange: (next) => {
+                busy.current = next;
+                setPending(next);
+            } })) : null }));
 }

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 }) })) : 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] }));
+    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: "filter", 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/PromoModal.js

@@ -4,6 +4,7 @@ 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 { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
  * Bottom-anchored modal for news, promotions, or announcements.
@@ -34,15 +35,20 @@ export function PromoModal({ visible, onDismiss, title, body, icon: Icon, header
                         justifyContent: "center",
                         paddingHorizontal: 24,
                         paddingVertical: insets.top + 16,
-                    } }) }), _jsx(View, { pointerEvents: "box-none", style: {
+                    } }) }), _jsx(KeyboardAwareScrollView, { bottomOffset: 24, contentContainerStyle: {
+                    flexGrow: 1,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingLeft: insets.left + 24,
+                    paddingRight: insets.right + 24,
+                    paddingTop: insets.top + 16,
+                    paddingBottom: insets.bottom + 16,
+                }, keyboardShouldPersistTaps: "handled", pointerEvents: "box-none", style: {
                     position: "absolute",
                     top: 0,
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    paddingHorizontal: 24,
                 }, children: _jsxs(View, { style: {
                         backgroundColor: theme.bg.card,
                         borderRadius: 28,

package/dist/widgets/QuickActions.d.ts

@@ -1,13 +1,8 @@
-import { ComponentType } from "react";
+import type { IconName } from "../Display/index.js";
 export interface QuickActionItem {
     id: string;
     label: string;
-    /** Ionicon name — use this OR `customIcon`. */
-    icon?: string;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
+    icon: IconName;
     badge?: string | number;
     onPress?: () => void;
     /** Circle background color override. Defaults to `theme.bg.muted`. */

package/dist/widgets/QuickActions.js

@@ -19,7 +19,7 @@ export function QuickActions({ items, title }) {
                                 justifyContent: "center",
                                 borderWidth: 1,
                                 borderColor: theme.border.default,
-                            }, children: _jsx(Icon, { color: theme.text.primary, customIcon: item.customIcon, name: item.icon, size: 24, type: item.customIcon ? "custom" : "ionicons" }) }), item.badge != null ? (_jsx(View, { style: {
+                            }, children: _jsx(Icon, { color: theme.text.primary, name: item.icon, size: 24 }) }), item.badge != null ? (_jsx(View, { style: {
                                 position: "absolute",
                                 top: 2,
                                 right: 4,

package/dist/widgets/ReorderableList.js

@@ -105,7 +105,7 @@ export default function ReorderableList({ items, keyExtractor, getItemLabel, onC
                                     justifyContent: "center",
                                 },
                                 handleStyle,
-                            ], testID: testID ? `${testID}-handle-${key}` : undefined, children: renderHandleContent ? (renderHandleContent(context)) : (_jsx(Icon, { name: "reorder-two-outline", size: 20 })) }) }));
+                            ], testID: testID ? `${testID}-handle-${key}` : undefined, children: renderHandleContent ? (renderHandleContent(context)) : (_jsx(Icon, { name: "reorder", size: 20 })) }) }));
                     return (_jsxs(View, { style: [
                             {
                                 width: "100%",
@@ -125,7 +125,7 @@ export default function ReorderableList({ items, keyExtractor, getItemLabel, onC
                                                     justifyContent: "center",
                                                 },
                                                 actionStyle,
-                                            ], children: _jsx(Icon, { name: "arrow-up-outline", size: 18 }) }), _jsx(Pressable, { accessibilityLabel: labels?.down?.(label) ?? `Bajar ${label}`, disabled: !context.canMoveDown, onPress: context.moveDown, style: [
+                                            ], children: _jsx(Icon, { name: "up", size: 18 }) }), _jsx(Pressable, { accessibilityLabel: labels?.down?.(label) ?? `Bajar ${label}`, disabled: !context.canMoveDown, onPress: context.moveDown, style: [
                                                 {
                                                     minWidth: 48,
                                                     minHeight: 48,
@@ -133,6 +133,6 @@ export default function ReorderableList({ items, keyExtractor, getItemLabel, onC
                                                     justifyContent: "center",
                                                 },
                                                 actionStyle,
-                                            ], children: _jsx(Icon, { name: "arrow-down-outline", size: 18 }) })] })) })] }, key));
+                                            ], children: _jsx(Icon, { name: "down", size: 18 }) })] })) })] }, key));
                 }, sortEnabled: !disabled, strategy: "insert" }, revision), error ? (_jsx(Typography.Text, { accessibilityRole: "alert", className: "text-danger", children: error })) : null] }));
 }

package/dist/widgets/TimeZoneSelectorModal.d.ts

@@ -1,14 +1,9 @@
-import { TimezoneLocale } from "../utils/timezone.js";
+import type { TimezoneLocale } from "../utils/timezone.js";
 interface TimeZoneSelectorModalProps {
     visible: boolean;
     onClose: () => void;
     onSelect: (tz: TimezoneLocale) => void;
     currentTimezone?: string | null;
 }
-/**
- * @deprecated Domain/region-coupled (hardcoded LatAm timezones + Spanish copy); relocated
- * to the core. Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
- * backwards compatibility and removed in the next major.
- */
 declare function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }: TimeZoneSelectorModalProps): import("react").JSX.Element;
 export { TimeZoneSelectorModal };

package/dist/widgets/TimeZoneSelectorModal.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { BottomSheet } from "../Dialog/BottomSheet/index.js";
-import { Display, Form } from "../index.js";
-import { theme } from "../theme/index.js";
+import { FlashList } from "@shopify/flash-list";
+import Button from "../Actions/Actions.Button.js";
+import Sheet from "../Dialog/Dialog.Sheet.js";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { useMemo, useState } from "react";
-import { FlatList, TextInput, TouchableOpacity, View } from "react-native";
+import { TextInput, View } from "react-native";
 const TIMEZONES_LOCALES = {
     bolivia: { timezone: "America/La_Paz", locale: "es-BO" },
     costaRica: { timezone: "America/Costa_Rica", locale: "es-CR" },
@@ -15,17 +18,18 @@ const TIMEZONES_LOCALES = {
     japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
 };
 function TimezoneRow({ item, isSelected, onSelect, }) {
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 border-b border-border-light ${isSelected ? "bg-info-light" : "bg-white"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: isSelected ? theme.info : theme.text.secondary, name: "schedule", size: 24, type: "material" }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: item.label }), _jsx(Typography.Text, { className: "text-text-tertiary text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-info items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
+    const theme = useTheme();
+    return (_jsxs(Pressable, { accessibilityHint: item.locale, accessibilityLabel: item.label, accessibilityRole: "radio", accessibilityState: { checked: isSelected, selected: isSelected }, className: "flex-row items-center p-4 border-b border-border-light", onPress: onSelect, style: {
+            minHeight: 64,
+            backgroundColor: isSelected ? theme.container.info : theme.bg.card,
+        }, testID: `timezone-${item.timezone}`, children: [_jsx(Icon, { color: isSelected ? theme.info : theme.text.secondary, name: "time", size: 24 }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: item.label }), _jsx(Typography.Text, { className: "text-text-tertiary text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-info items-center justify-center", children: _jsx(Icon, { color: theme.text.inverse, name: "check", size: 16 }) }))] }));
 }
 function EmptyState() {
-    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 200 }, children: [_jsx(Display.Icon, { color: theme.text.tertiary, name: "search-off", size: 48, type: "material" }), _jsx(Typography.Text, { className: "text-text-secondary text-center mt-4", children: "No se encontraron zonas horarias" })] }));
+    const theme = useTheme();
+    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 200 }, children: [_jsx(Icon, { color: theme.text.tertiary, name: "search-empty", size: 48 }), _jsx(Typography.Text, { className: "text-text-secondary text-center mt-4", children: "No se encontraron zonas horarias" })] }));
 }
-/**
- * @deprecated Domain/region-coupled (hardcoded LatAm timezones + Spanish copy); relocated
- * to the core. Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
- * backwards compatibility and removed in the next major.
- */
 function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }) {
+    const theme = useTheme();
     const [query, setQuery] = useState("");
     const [selectedTimezone, setSelectedTimezone] = useState(currentTimezone || null);
     const timezoneList = useMemo(() => {
@@ -38,6 +42,7 @@ function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, })
         if (!query.trim())
             return timezoneList;
         const normalizedQuery = query
+            .trim()
             .toLowerCase()
             .normalize("NFD")
             .replace(/[\u0300-\u036f]/g, "");
@@ -57,6 +62,6 @@ function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, })
             onClose();
         }
     }
-    return (_jsxs(BottomSheet.Root, { onClose: onClose, size: "large", visible: visible, children: [_jsxs(BottomSheet.Header, { children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { bold: true, variant: "subtitle", children: "Zona Horaria" }), _jsx(Typography.Text, { className: "text-text-secondary text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-bg-muted px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, underlineColorAndroid: "transparent", value: query }) })] }), _jsx(BottomSheet.Content, { scrollable: true, children: filteredTimezones.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(FlatList, { data: filteredTimezones, keyExtractor: (item) => item.timezone, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), scrollEnabled: false })) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedTimezone && (_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: handleConfirm, title: "Confirmar", variant: "primary" }) }))] })] }));
+    return (_jsx(Sheet, { footer: _jsxs(View, { className: "flex-row gap-3", children: [_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedTimezone && (_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: handleConfirm, title: "Confirmar", variant: "primary" }) }))] }), onClose: onClose, scrollable: false, snapPoints: ["90%"], testID: "timezone-sheet", title: "Zona Horaria", visible: visible, children: _jsxs(View, { className: "flex-1", children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { className: "text-text-secondary text-xs mb-3", children: "Selecciona tu zona horaria" }), _jsx(TextInput, { accessibilityLabel: "Buscar zona horaria", className: "bg-bg-muted px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, style: { color: theme.text.primary }, testID: "timezone-search", underlineColorAndroid: "transparent", value: query })] }), _jsx(FlashList, { contentContainerStyle: { flexGrow: 1 }, data: filteredTimezones, extraData: selectedTimezone, keyboardDismissMode: "on-drag", keyboardShouldPersistTaps: "handled", keyExtractor: (item) => item.timezone, ListEmptyComponent: EmptyState, maintainVisibleContentPosition: { disabled: true }, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), style: { flex: 1 }, testID: "timezone-list" })] }) }));
 }
 export { TimeZoneSelectorModal };

package/dist/widgets/index.d.ts

@@ -1,21 +1,10 @@
 export type { CollectionField, CollectionQuery, CollectionSort, CriteriaCondition, CriteriaField, CriteriaGroup, CriteriaNode, CriteriaOperator, CriteriaValue, SavedCollectionQuery, } from "../utils/criteria.js";
-export { CircleButton } from "./CircleButton.js";
 export { default as CollectionOptions, type CollectionOptionsProps, } from "./CollectionOptions.js";
 export { FilterBar, type FilterBarOption, type FilterBarProps, } from "./FilterBar.js";
 export { default as FilterBuilder, type FilterBuilderProps, } from "./FilterBuilder.js";
-export { default as GeoPermissionCard } from "./GeoPermissionCard.js";
-export { HomeHeader } from "./HomeHeader.js";
-export { MenuCard } from "./MenuCard.js";
-export type { MenuGridItem, MenuGridProps } from "./MenuGrid.js";
-/** @deprecated Renamed to `MenuGridItem`. */
-export type { MenuGridItem as MenuItem } from "./MenuGrid.js";
-export { MenuGrid } from "./MenuGrid.js";
-export type { MenuSectionProps } from "./MenuSection.js";
-export { MenuSection } from "./MenuSection.js";
 export type { PromoBannerItem, PromoBannerProps, } from "./PromoBanner.js";
 export { PromoBanner } from "./PromoBanner.js";
 export type { PromoModalProps } from "./PromoModal.js";
 export { PromoModal } from "./PromoModal.js";
 export type { QuickActionItem, QuickActionsProps, } from "./QuickActions.js";
 export { QuickActions } from "./QuickActions.js";
-export { TimeZoneSelector } from "./TimeZoneSelector.js";

package/dist/widgets/index.js

@@ -1,13 +1,6 @@
-export { CircleButton } from "./CircleButton.js";
 export { default as CollectionOptions, } from "./CollectionOptions.js";
 export { FilterBar, } from "./FilterBar.js";
 export { default as FilterBuilder, } from "./FilterBuilder.js";
-export { default as GeoPermissionCard } from "./GeoPermissionCard.js";
-export { HomeHeader } from "./HomeHeader.js";
-export { MenuCard } from "./MenuCard.js";
-export { MenuGrid } from "./MenuGrid.js";
-export { MenuSection } from "./MenuSection.js";
 export { PromoBanner } from "./PromoBanner.js";
 export { PromoModal } from "./PromoModal.js";
 export { QuickActions } from "./QuickActions.js";
-export { TimeZoneSelector } from "./TimeZoneSelector.js";