@sincpro/mobile-ui 0.7.2 → 1.1.0

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/GeoPermissionCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display, Form } from "../index";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import { Display, Form } from "../index.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 import { tv } from "tailwind-variants";
 const statusTextVariants = tv({

package/dist/widgets/HomeHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display, Typography } from "../index";
-import GradientContainer from "../layouts/GradientContainer";
-import { theme } from "../theme";
+import { Display, Typography } from "../index.js";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { theme } from "../theme/index.js";
 import { TouchableOpacity, View } from "react-native";
 /**
  * @deprecated Legacy style (gradient). For new top bars use `Navigation.AppBar`.

package/dist/widgets/JSONViewer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { ThemedActivityIndicator } from "../theme";
-import { fontFamilies } from "../theme/typography";
+import { ThemedActivityIndicator } from "../theme/index.js";
+import { fontFamilies } from "../theme/typography.js";
 import { useEffect, useMemo, useState } from "react";
 import { Text, View } from "react-native";
 const parseDeepJson = (value) => {

package/dist/widgets/MenuCard.d.ts

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

package/dist/widgets/MenuCard.js

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

package/dist/widgets/MenuGrid.d.ts

@@ -1,5 +1,5 @@
 /** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.MenuGrid` instead. */
-export type { MenuGridItem, MenuGridProps, } from "../Display/Display.MenuGrid";
-export { MenuGrid } from "../Display/Display.MenuGrid";
+export type { MenuGridItem, MenuGridProps, } from "../Display/Display.MenuGrid.js";
+export { MenuGrid } from "../Display/Display.MenuGrid.js";
 /** @deprecated Renamed to `MenuGridItem`. */
-export type { MenuGridItem as MenuItem } from "../Display/Display.MenuGrid";
+export type { MenuGridItem as MenuItem } from "../Display/Display.MenuGrid.js";

package/dist/widgets/MenuGrid.js

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

package/dist/widgets/MenuSection.d.ts

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

package/dist/widgets/MenuSection.js

@@ -1 +1 @@
-export { MenuSection } from "../Navigation/Navigation.MenuSection";
+export { MenuSection } from "../Navigation/Navigation.MenuSection.js";

package/dist/widgets/PromoBanner.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 function BannerCard({ item }) {
     const theme = useTheme();

package/dist/widgets/PromoModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**

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/QuickActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 /**
  * Horizontal scrollable row of small icon+label shortcuts ("Acciones Rápidas").

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;

package/dist/widgets/ReorderableList.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { moveCollectionEntry } from "../utils/criteria.js";
+import { applyReorder, moveReorderItem, reorderKeys, sameOrder, } from "../utils/reorder.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, useWindowDimensions, View, } from "react-native";
+import Sortable from "react-native-sortables";
+export default function ReorderableList({ items, keyExtractor, getItemLabel, onChange, renderItem, renderControls, renderHandleContent, disabled = false, className, style, itemStyle, contentStyle, controlsStyle, handleStyle, actionStyle, testID, labels, onDragStart, onDragEnd, onReorderRejected, sortableProps, }) {
+    const { fontScale } = useWindowDimensions();
+    const keys = useMemo(() => reorderKeys(items, keyExtractor), [items, keyExtractor]);
+    const data = useMemo(() => [...items], [items]);
+    const dragOrder = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [error, setError] = useState();
+    const [revision, setRevision] = useState(0);
+    const busy = disabled || dragging;
+    const commit = (order, event) => {
+        if (sameOrder(keys, order))
+            return;
+        const next = applyReorder(items, keyExtractor, order);
+        onChange(next, event);
+        AccessibilityInfo.announceForAccessibility(labels?.moved?.(getItemLabel(next[event.toIndex]), event.toIndex + 1, items.length) ??
+            `${getItemLabel(next[event.toIndex])}, posición ${event.toIndex + 1} de ${items.length}`);
+    };
+    const reject = useCallback((reason) => {
+        const message = reason === "disabled"
+            ? (labels?.disabledDuringDrag ??
+                "El orden se bloqueó durante el arrastre. No se aplicó el cambio.")
+            : (labels?.changedDuringDrag ??
+                "La lista cambió durante el arrastre. Revisa el orden e inténtalo de nuevo.");
+        setError(message);
+        setRevision((value) => value + 1);
+        AccessibilityInfo.announceForAccessibility(message);
+        onReorderRejected?.(reason);
+    }, [labels?.changedDuringDrag, labels?.disabledDuringDrag, onReorderRejected]);
+    useEffect(() => {
+        if (dragOrder.current && (disabled || !sameOrder(dragOrder.current, keys))) {
+            dragOrder.current = null;
+            setDragging(false);
+            reject(disabled ? "disabled" : "data-changed");
+            onDragEnd?.();
+        }
+    }, [disabled, keys, onDragEnd, reject]);
+    return (_jsxs(View, { className: cn("gap-2", className), style: style, testID: testID, children: [_jsx(Sortable.Grid, { activeItemScale: 1, activeItemShadowOpacity: 0, rowGap: 8, ...sortableProps, columns: 1, customHandle: true, data: data, keyExtractor: keyExtractor, onDragEnd: ({ fromIndex, toIndex }) => {
+                    const started = dragOrder.current;
+                    if (!started)
+                        return;
+                    dragOrder.current = null;
+                    setDragging(false);
+                    if (started && !sameOrder(started, keys))
+                        reject("data-changed");
+                    else if (disabled)
+                        reject("disabled");
+                    else if (started)
+                        commit(moveReorderItem(keys, fromIndex, toIndex), {
+                            key: keys[fromIndex],
+                            fromIndex,
+                            toIndex,
+                            source: "drag",
+                        });
+                    onDragEnd?.();
+                }, onDragStart: ({ fromIndex }) => {
+                    dragOrder.current = keys;
+                    setDragging(true);
+                    setError(undefined);
+                    onDragStart?.(keys[fromIndex]);
+                }, renderItem: ({ item, index }) => {
+                    const key = keys[index];
+                    const label = getItemLabel(item);
+                    const move = (direction) => {
+                        if (busy || index + direction < 0 || index + direction >= items.length)
+                            return;
+                        setError(undefined);
+                        commit(moveCollectionEntry(keys, index, direction), {
+                            key,
+                            fromIndex: index,
+                            toIndex: index + direction,
+                            source: "button",
+                        });
+                    };
+                    const context = {
+                        item,
+                        index,
+                        canMoveUp: !busy && index > 0,
+                        canMoveDown: !busy && index < items.length - 1,
+                        moveUp: () => move(-1),
+                        moveDown: () => move(1),
+                    };
+                    const dragHandle = (_jsx(Sortable.Handle, { mode: disabled ? "non-draggable" : "draggable", children: _jsx(View, { accessibilityActions: [
+                                ...(context.canMoveUp ? [{ name: "decrement" }] : []),
+                                ...(context.canMoveDown ? [{ name: "increment" }] : []),
+                            ], accessibilityLabel: labels?.drag?.(label) ?? `Arrastrar ${label}`, accessibilityRole: "adjustable", accessibilityState: { disabled, busy: dragging }, accessibilityValue: { min: 1, max: items.length, now: index + 1 }, accessible: true, onAccessibilityAction: ({ nativeEvent }) => {
+                                if (nativeEvent.actionName === "increment")
+                                    move(1);
+                                if (nativeEvent.actionName === "decrement")
+                                    move(-1);
+                            }, style: [
+                                {
+                                    minHeight: 48,
+                                    minWidth: 48,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                },
+                                handleStyle,
+                            ], testID: testID ? `${testID}-handle-${key}` : undefined, children: renderHandleContent ? (renderHandleContent(context)) : (_jsx(Icon, { name: "reorder-two-outline", size: 20 })) }) }));
+                    return (_jsxs(View, { style: [
+                            {
+                                width: "100%",
+                                flexDirection: fontScale > 1.3 ? "column" : "row",
+                                alignItems: "center",
+                                gap: 8,
+                            },
+                            itemStyle,
+                        ], testID: testID ? `${testID}-item-${key}` : undefined, children: [_jsx(View, { style: [
+                                    fontScale > 1.3 ? { alignSelf: "stretch" } : { flex: 1, minWidth: 0 },
+                                    contentStyle,
+                                ], children: renderItem(context) }), _jsx(View, { style: [{ flexDirection: "row", alignItems: "center" }, controlsStyle], children: renderControls ? (renderControls({ ...context, dragHandle })) : (_jsxs(_Fragment, { children: [dragHandle, _jsx(Pressable, { accessibilityLabel: labels?.up?.(label) ?? `Subir ${label}`, disabled: !context.canMoveUp, onPress: context.moveUp, style: [
+                                                {
+                                                    minWidth: 48,
+                                                    minHeight: 48,
+                                                    alignItems: "center",
+                                                    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: [
+                                                {
+                                                    minWidth: 48,
+                                                    minHeight: 48,
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                },
+                                                actionStyle,
+                                            ], children: _jsx(Icon, { name: "arrow-down-outline", size: 18 }) })] })) })] }, key));
+                }, sortEnabled: !disabled, strategy: "insert" }, revision), error ? (_jsx(Typography.Text, { accessibilityRole: "alert", className: "text-danger", children: error })) : null] }));
+}

package/dist/widgets/ScreenHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientContainer from "../layouts/GradientContainer";
-import { Navigation } from "../Navigation";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { Navigation } from "../Navigation/index.js";
 import { View } from "react-native";
 const Header = Navigation.Header;
 const HeaderToolbar = Navigation.HeaderToolbar;

package/dist/widgets/TimeZoneSelector.d.ts

@@ -1,4 +1,4 @@
-import { TimezoneLocale } from "../utils/timezone";
+import { TimezoneLocale } from "../utils/timezone.js";
 interface TimeZoneSelectorProps {
     onSelect?: (tz: TimezoneLocale) => void;
     timezone?: string | null;

package/dist/widgets/TimeZoneSelector.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display, Form } from "../index";
-import { theme } from "../theme/useTheme";
-import { Typography } from "../Typography";
-import { TimeZoneSelectorModal } from "../widgets/TimeZoneSelectorModal";
+import { Display, Form } from "../index.js";
+import { theme } from "../theme/useTheme.js";
+import { Typography } from "../Typography/index.js";
+import { TimeZoneSelectorModal } from "./TimeZoneSelectorModal.js";
 import { useState } from "react";
 import { View } from "react-native";
 /**

package/dist/widgets/TimeZoneSelectorModal.d.ts

@@ -1,4 +1,4 @@
-import { TimezoneLocale } from "../utils/timezone";
+import { TimezoneLocale } from "../utils/timezone.js";
 interface TimeZoneSelectorModalProps {
     visible: boolean;
     onClose: () => void;

package/dist/widgets/TimeZoneSelectorModal.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { BottomSheet } from "../Dialog/BottomSheet";
-import { Display, Form } from "../index";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import { BottomSheet } from "../Dialog/BottomSheet/index.js";
+import { Display, Form } from "../index.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useMemo, useState } from "react";
 import { FlatList, TextInput, TouchableOpacity, View } from "react-native";
 const TIMEZONES_LOCALES = {
@@ -57,6 +57,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, 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 (_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" }) }))] })] }));
 }
 export { TimeZoneSelectorModal };

package/dist/widgets/index.d.ts

@@ -1,17 +1,21 @@
-export { CircleButton } from "../widgets/CircleButton";
-export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
-export { HomeHeader } from "../widgets/HomeHeader";
-export { MenuCard } from "../widgets/MenuCard";
-export type { MenuGridItem, MenuGridProps } from "../widgets/MenuGrid";
+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 "../widgets/MenuGrid";
-export { MenuGrid } from "../widgets/MenuGrid";
-export type { MenuSectionProps } from "../widgets/MenuSection";
-export { MenuSection } from "../widgets/MenuSection";
-export type { PromoBannerItem, PromoBannerProps, } from "../widgets/PromoBanner";
-export { PromoBanner } from "../widgets/PromoBanner";
-export type { PromoModalProps } from "../widgets/PromoModal";
-export { PromoModal } from "../widgets/PromoModal";
-export type { QuickActionItem, QuickActionsProps, } from "../widgets/QuickActions";
-export { QuickActions } from "../widgets/QuickActions";
-export { TimeZoneSelector } from "../widgets/TimeZoneSelector";
+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,10 +1,13 @@
-export { CircleButton } from "../widgets/CircleButton";
-export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
-export { HomeHeader } from "../widgets/HomeHeader";
-export { MenuCard } from "../widgets/MenuCard";
-export { MenuGrid } from "../widgets/MenuGrid";
-export { MenuSection } from "../widgets/MenuSection";
-export { PromoBanner } from "../widgets/PromoBanner";
-export { PromoModal } from "../widgets/PromoModal";
-export { QuickActions } from "../widgets/QuickActions";
-export { TimeZoneSelector } from "../widgets/TimeZoneSelector";
+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";