@sincpro/mobile-ui 1.0.1 → 2.0.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, { 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, { label: label, onChange: (date) => update(`${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`), value: parseCriteriaDate(condition.values[index]) }, index)) : (_jsx(Input, { keyboardType: field?.type === "number" ? "numbers-and-punctuation" : "default", label: label, onChangeText: update, testID: `criteria-value-${index}`, value: condition.values[index] === undefined ||
+                                Number.isNaN(condition.values[index])
+                                ? ""
+                                : String(condition.values[index]) }, index));
+                    }), error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null, _jsx(Button, { 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, { onPress: () => setEditing(null), title: "Cancelar condici\u00F3n", variant: "secondary" })] })) : (_jsxs(_Fragment, { children: [path.length ? (_jsx(Button, { onPress: () => setPath(path.slice(0, -1)), title: "Volver al grupo anterior", variant: "link" })) : null, _jsx(QueryChoice, { label: "Coinciden", onChange: (join) => changeGroup({ ...group, join }), options: [
+                            { label: "Todas las condiciones", value: "all" },
+                            { label: "Cualquiera de las condiciones", value: "any" },
+                            { label: "Ninguna de las condiciones", value: "none" },
+                        ], value: group.join }), !group.children.length ? (_jsx(Typography.Text, { className: "text-text-secondary", children: "Sin condiciones en este grupo." })) : null, group.children.map((child, index) => (_jsxs(View, { className: "border-b border-border-light pb-3 gap-2", children: [_jsx(Typography.Text, { variant: "bodyReadable", children: describeCriteria(child, fields) }), _jsxs(View, { className: "flex-row flex-wrap gap-2", children: [_jsx(Button, { 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, { 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, { disabled: !fields.some((item) => item.operators.length), onPress: addCondition, title: "A\u00F1adir condici\u00F3n", variant: "secondary" }), _jsx(Button, { onPress: () => {
+                            changeGroup({
+                                ...group,
+                                children: [...group.children, { kind: "group", join: "any", children: [] }],
+                            });
+                            setPath([...path, group.children.length]);
+                        }, title: "A\u00F1adir grupo", variant: "secondary" })] }))] }));
+}

package/dist/widgets/HomeHeader.d.ts

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

package/dist/widgets/PromoModal.js

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

package/dist/widgets/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;

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.d.ts

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

package/dist/widgets/index.d.ts

@@ -1,4 +1,8 @@
+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";

package/dist/widgets/index.js

@@ -1,4 +1,7 @@
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -19,8 +19,10 @@
     "./Dialog": "./dist/Dialog/index.js",
     "./Dialog/BottomSheet": "./dist/Dialog/BottomSheet/index.js",
     "./Dialog/Sheet": "./dist/Dialog/Dialog.Sheet.js",
+    "./Dialog/NativeSheet": "./dist/Dialog/Dialog.NativeSheet.js",
     "./Actions": "./dist/Actions/index.js",
     "./Display": "./dist/Display/index.js",
+    "./Display/ExpoImage": "./dist/Display/Display.ExpoImage.js",
     "./Feedback": "./dist/Feedback/index.js",
     "./Form": "./dist/Form/index.js",
     "./Navigation": "./dist/Navigation/index.js",
@@ -28,6 +30,7 @@
     "./primitives": "./dist/primitives/index.js",
     "./tokens": "./dist/tokens/index.js",
     "./widgets": "./dist/widgets/index.js",
+    "./widgets/ReorderableList": "./dist/widgets/ReorderableList.js",
     "./views/Wizard": "./dist/views/Wizard/index.js",
     "./tailwind.preset": "./tailwind.preset.js",
     "./theme/globals.css": "./dist/theme/globals.css",
@@ -61,21 +64,27 @@
     "expo-checkbox": ">=58.0.0",
     "expo-clipboard": ">=58.0.0",
     "expo-linear-gradient": ">=58.0.0",
+    "expo-image": ">=58.0.0",
     "expo-localization": ">=58.0.0",
     "nativewind": ">=4.2.7",
     "react": ">=19.3",
     "react-hook-form": ">=7",
     "react-native": ">=0.88",
     "react-native-currency-input": ">=1.1",
+    "react-native-gesture-handler": ">=3.3",
     "react-native-keyboard-controller": ">=1.22",
     "react-native-reanimated": ">=4.7",
     "react-native-safe-area-context": ">=5.11",
+    "react-native-sortables": ">=1.10.1 <2",
     "react-native-svg": ">=15.16",
     "react-native-worklets": ">=0.13"
   },
   "peerDependenciesMeta": {
     "@expo/ui": {
       "optional": true
+    },
+    "react-native-sortables": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -86,6 +95,12 @@
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
+    "@jest/globals": "^30.0.0",
+    "@testing-library/react-native": "14.1.0",
+    "@react-native/jest-preset": "^0.88.1",
+    "jest": "^30.0.0",
+    "jest-expo": "~58.0.14",
+    "test-renderer": "^1.0.0",
     "@expo-google-fonts/ibm-plex-mono": "^0.4.1",
     "@expo-google-fonts/ibm-plex-sans": "^0.4.1",
     "@expo/ui": "~58.0.27",
@@ -111,6 +126,7 @@
     "expo-checkbox": "~58.0.2",
     "expo-clipboard": "~58.0.4",
     "expo-font": "~58.0.11",
+    "expo-image": "~58.0.18",
     "expo-linear-gradient": "~58.0.3",
     "expo-localization": "~58.0.5",
     "expo-status-bar": "~58.0.4",
@@ -125,6 +141,7 @@
     "react-native-keyboard-controller": "1.22.7",
     "react-native-reanimated": "4.7.1",
     "react-native-safe-area-context": "~5.11.1",
+    "react-native-sortables": "^1.10.1",
     "react-native-svg": "15.16.0",
     "react-native-worklets": "0.13.0",
     "storybook": "10.6.6",