@sincpro/mobile-ui 1.1.0 → 2.0.0

package/dist/Actions/index.d.ts

@@ -1,3 +1,4 @@
+import Dock from "./Actions.Dock.js";
 import FAB from "./Actions.FAB.js";
 import { FilterButtonGroup } from "./Actions.FilterButton.js";
 import IconButton from "./Actions.IconButton.js";
@@ -6,6 +7,8 @@ export declare const Actions: {
     Button: import("react").FC<import("./Actions.Button.js").ButtonProps> & {
         Icon: import("react").FC<import("./Actions.Button.js").ButtonIconProps>;
     };
+    /** Compact primary-action dock with additional options in a dismissible sheet. */
+    Dock: typeof Dock;
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton: typeof IconButton;
     /** Floating Action Button — fixed bottom-right/left, label-optional. */
@@ -16,6 +19,7 @@ export declare const Actions: {
     FilterButtonGroup: typeof FilterButtonGroup;
 };
 export type { ButtonIconProps, ButtonProps } from "./Actions.Button.js";
+export type { DockProps } from "./Actions.Dock.js";
 export type { FABProps } from "./Actions.FAB.js";
 export type { FilterButtonGroupProps, FilterButtonProps, } from "./Actions.FilterButton.js";
 export type { IconButtonProps } from "./Actions.IconButton.js";

package/dist/Actions/index.js

@@ -1,10 +1,13 @@
 import ButtonWithIcon from "./Actions.Button.js";
+import Dock from "./Actions.Dock.js";
 import FAB from "./Actions.FAB.js";
 import { FilterButton, FilterButtonGroup, } from "./Actions.FilterButton.js";
 import IconButton from "./Actions.IconButton.js";
 export const Actions = {
     /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
     Button: ButtonWithIcon,
+    /** Compact primary-action dock with additional options in a dismissible sheet. */
+    Dock,
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton,
     /** Floating Action Button — fixed bottom-right/left, label-optional. */

package/dist/Dialog/BottomSheet/BottomSheet.Root.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 /* eslint-disable react-hooks/refs */
 import { theme } from "../../theme/index.js";
-import { createContext, useContext, useEffect, useRef } from "react";
+import { useSheetTranslation } from "../../utils/useSheetTranslation.js";
+import { createContext, useContext, useRef } from "react";
 import { Animated, Dimensions, Modal, PanResponder, Pressable, ScrollView, Text, View, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 const BottomSheetContext = createContext(null);
@@ -98,27 +99,17 @@ const SIZE_MAP = {
 function Root({ visible, onClose, size = "auto", dismissible = true, children }) {
     const insets = useSafeAreaInsets();
     const screenHeight = Dimensions.get("window").height;
-    const translateY = useRef(new Animated.Value(screenHeight)).current;
+    const { translateY, reducedMotion } = useSheetTranslation(visible, screenHeight);
+    const gesture = useRef({ dismissible, onClose, reducedMotion });
+    gesture.current = { dismissible, onClose, reducedMotion };
     const maxHeight = size === "auto" ? screenHeight * 0.9 : screenHeight * SIZE_MAP[size];
     const minHeight = size === "auto" ? 0 : screenHeight * SIZE_MAP[size];
-    useEffect(() => {
-        if (visible) {
-            Animated.spring(translateY, {
-                toValue: 0,
-                useNativeDriver: true,
-                damping: 20,
-                stiffness: 300,
-            }).start();
-        }
-        else {
-            translateY.setValue(screenHeight);
-        }
-    }, [visible, screenHeight, translateY]);
     const panResponder = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: () => dismissible,
+        onStartShouldSetPanResponder: () => gesture.current.dismissible,
         onMoveShouldSetPanResponder: (_, gestureState) => {
-            return dismissible && Math.abs(gestureState.dy) > 10;
+            return gesture.current.dismissible && Math.abs(gestureState.dy) > 10;
         },
+        onPanResponderGrant: () => translateY.stopAnimation(),
         onPanResponderMove: (_, gestureState) => {
             if (gestureState.dy > 0) {
                 translateY.setValue(gestureState.dy);
@@ -126,36 +117,33 @@ function Root({ visible, onClose, size = "auto", dismissible = true, children })
         },
         onPanResponderRelease: (_, gestureState) => {
             if (gestureState.dy > 100 || gestureState.vy > 0.5) {
-                Animated.timing(translateY, {
-                    toValue: screenHeight,
-                    duration: 200,
-                    useNativeDriver: true,
-                }).start(() => onClose());
+                translateY.stopAnimation();
+                gesture.current.onClose();
             }
             else {
-                Animated.spring(translateY, {
-                    toValue: 0,
-                    useNativeDriver: true,
-                    damping: 20,
-                    stiffness: 300,
-                }).start();
+                if (gesture.current.reducedMotion)
+                    translateY.setValue(0);
+                else
+                    Animated.spring(translateY, {
+                        toValue: 0,
+                        useNativeDriver: true,
+                        damping: 20,
+                        stiffness: 300,
+                    }).start();
             }
         },
     })).current;
     function handleBackdropPress() {
         if (dismissible) {
-            Animated.timing(translateY, {
-                toValue: screenHeight,
-                duration: 200,
-                useNativeDriver: true,
-            }).start(() => onClose());
+            translateY.stopAnimation();
+            onClose();
         }
     }
     const contextValue = {
         close: onClose,
         panHandlers: panResponder.panHandlers,
     };
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 bg-black/50", children: [_jsx(Pressable, { className: "flex-1", onPress: handleBackdropPress }), _jsx(Animated.View, { className: "rounded-t-3xl overflow-hidden", style: {
+    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 bg-black/50", children: [_jsx(Pressable, { className: "flex-1", onPress: handleBackdropPress }), _jsx(Animated.View, { className: "rounded-t-3xl overflow-hidden", style: {
                         backgroundColor: theme.bg.popover,
                         maxHeight,
                         minHeight: minHeight || undefined,

package/dist/Dialog/Dialog.ActionSheet.js

@@ -4,28 +4,14 @@ import Pressable from "../primitives/Pressable.js";
 import { themeToVars, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { useSheetTranslation } from "../utils/useSheetTranslation.js";
 import { vars } from "nativewind";
-import { useEffect, useRef } from "react";
 import { Animated, Modal, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function ActionSheet({ visible, onClose, actions, title, message, cancelLabel = "Cancelar", testID, }) {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
-    // eslint-disable-next-line react-hooks/refs
-    const translateY = useRef(new Animated.Value(800)).current;
-    useEffect(() => {
-        if (visible) {
-            Animated.spring(translateY, {
-                toValue: 0,
-                useNativeDriver: true,
-                damping: 20,
-                stiffness: 300,
-            }).start();
-        }
-        else {
-            translateY.setValue(800);
-        }
-    }, [visible, translateY]);
+    const { translateY } = useSheetTranslation(visible);
     return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { accessibilityElementsHidden: true, className: "absolute inset-0 bg-black/50", importantForAccessibility: "no-hide-descendants", onResponderRelease: onClose, onStartShouldSetResponder: () => true }), _jsxs(Animated.View, { accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: [
                         vars(themeToVars(theme)),
                         {

package/dist/Dialog/Dialog.Confirmation.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { BaseButton } from "../primitives/BaseButton.js";
 import { theme } from "../theme/index.js";
 import Typography from "../Typography/Typography.Text.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { Modal, TouchableWithoutFeedback, View } from "react-native";
 const ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "Descartar cambios", subtitle = "¿Quieres descartar los cambios realizados?", confirmButtonText = "Descartar cambios", cancelButtonText = "Seguir editando", }) => {
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { accessibilityViewIsModal: true, className: "p-3 w-full max-w-xs mx-auto", style: {
-                            borderRadius: 16,
-                            backgroundColor: theme.bg.popover,
-                            ...theme.shadow.md,
-                        }, children: [_jsx(Typography, { accessibilityRole: "header", className: "mb-1.5 text-sm", variant: "body", children: _jsx(Typography, { semibold: true, variant: "body", children: auxTitle }) }), _jsx(Typography, { className: "mb-3 text-xs leading-tight", variant: "body", children: subtitle }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(BaseButton, { className: "flex-1", onPress: onCancel, size: "small", title: cancelButtonText, variant: "outlineBlack" }), _jsx(BaseButton, { className: "flex-1", onPress: onConfirm, size: "small", title: confirmButtonText, variant: "primary" })] })] }) }) }) }) }));
+    const reducedMotion = useReducedMotion();
+    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: [_jsx(TouchableWithoutFeedback, { accessible: false, onPress: onCancel, children: _jsx(View, { className: "absolute inset-0" }) }), _jsxs(View, { accessibilityViewIsModal: true, className: "p-3 w-full max-w-xs mx-auto", onAccessibilityEscape: onCancel, style: {
+                        borderRadius: 16,
+                        backgroundColor: theme.bg.popover,
+                        ...theme.shadow.md,
+                    }, children: [_jsx(Typography, { accessibilityRole: "header", className: "mb-1.5 text-sm", variant: "body", children: _jsx(Typography, { semibold: true, variant: "body", children: auxTitle }) }), _jsx(Typography, { className: "mb-3 text-xs leading-tight", variant: "body", children: subtitle }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(BaseButton, { className: "flex-1", onPress: onCancel, size: "small", title: cancelButtonText, variant: "outlineBlack" }), _jsx(BaseButton, { className: "flex-1", onPress: onConfirm, size: "small", title: confirmButtonText, variant: "primary" })] })] })] }) }));
 };
 export default ConfirmationDialog;

package/dist/Dialog/Dialog.EditValue.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { theme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useEffect, useRef } from "react";
 import { FlatList, Modal, TextInput, TouchableOpacity, View, } from "react-native";
 function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, onCancel, placeholder, helperText, chips, keyboardType = "decimal-pad", rightAdornment, confirmLabel = "Aplicar", cancelLabel = "Cancelar", autoFocus = true, testID, }) {
     const inputRef = useRef(null);
+    const reducedMotion = useReducedMotion();
     useEffect(() => {
         if (visible && autoFocus) {
             const t = setTimeout(() => inputRef.current?.focus(), 60);
             return () => clearTimeout(t);
         }
     }, [visible, autoFocus]);
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { className: "p-4", style: { borderRadius: 16, backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, placeholderTextColor: theme.text.tertiary, ref: inputRef, returnKeyType: "done", selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
+    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { accessibilityViewIsModal: true, className: "p-4", onAccessibilityEscape: onCancel, style: { borderRadius: 16, backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { accessibilityLabel: title, className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, placeholderTextColor: theme.text.tertiary, ref: inputRef, returnKeyType: "done", selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
 }
 export default EditableValueModal;

package/dist/Dialog/Dialog.Sheet.d.ts

@@ -10,6 +10,8 @@ export interface SheetProps {
     visible: boolean;
     onClose: () => void;
     children: ReactNode;
+    footer?: ReactNode;
+    footerClassName?: string;
     title?: string;
     /** Max sheet height (fraction of the screen). Default 0.9. */
     maxHeightRatio?: number;
@@ -17,8 +19,6 @@ export interface SheetProps {
     dismissOnBackdrop?: boolean;
     /** Show a visible close button in the sheet header. */
     showCloseButton?: boolean;
-    /** Increase interactive targets to 48 points. */
-    accessibleSizing?: boolean;
     testID?: string;
 }
 /**
@@ -26,5 +26,5 @@ export interface SheetProps {
  * **swipe-down to close** (handle only). By default it does NOT close on backdrop tap
  * (`dismissOnBackdrop`). No provider or native deps. Import via subpath `Dialog/Sheet`.
  */
-declare function Sheet({ visible, onClose, children, title, maxHeightRatio, dismissOnBackdrop, showCloseButton, accessibleSizing, testID, }: SheetProps): import("react").JSX.Element;
+declare function Sheet({ visible, onClose, children, footer, footerClassName, title, maxHeightRatio, dismissOnBackdrop, showCloseButton, testID, }: SheetProps): import("react").JSX.Element;
 export default Sheet;

package/dist/Dialog/Dialog.Sheet.js

@@ -6,8 +6,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "nativewind/js
 import Pressable from "../primitives/Pressable.js";
 import { themeToVars, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
+import { useSheetTranslation } from "../utils/useSheetTranslation.js";
 import { vars } from "nativewind";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
@@ -22,42 +23,30 @@ export function SheetProvider({ children }) {
  * **swipe-down to close** (handle only). By default it does NOT close on backdrop tap
  * (`dismissOnBackdrop`). No provider or native deps. Import via subpath `Dialog/Sheet`.
  */
-function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, showCloseButton = false, accessibleSizing = false, testID, }) {
+function Sheet({ visible, onClose, children, footer, footerClassName, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, showCloseButton = false, testID, }) {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
-    const translateY = useRef(new Animated.Value(800)).current;
-    const onCloseRef = useRef(onClose);
-    onCloseRef.current = onClose;
-    useEffect(() => {
-        if (visible) {
-            Animated.spring(translateY, {
-                toValue: 0,
-                useNativeDriver: true,
-                damping: 20,
-                stiffness: 300,
-            }).start();
-        }
-        else {
-            translateY.setValue(800);
-        }
-    }, [visible, translateY]);
+    const { translateY, reducedMotion } = useSheetTranslation(visible);
+    const gesture = useRef({ onClose, reducedMotion });
+    gesture.current = { onClose, reducedMotion };
     const [pan] = useState(() => PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, g) => g.dy > 2,
+        onPanResponderGrant: () => translateY.stopAnimation(),
         onPanResponderMove: (_, g) => {
             if (g.dy > 0)
                 translateY.setValue(g.dy);
         },
         onPanResponderRelease: (_, g) => {
             if (g.dy > 100 || g.vy > 0.5) {
-                Animated.timing(translateY, {
-                    toValue: 800,
-                    duration: 200,
-                    useNativeDriver: true,
-                }).start(() => onCloseRef.current());
+                translateY.stopAnimation();
+                gesture.current.onClose();
             }
             else {
-                Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
+                if (gesture.current.reducedMotion)
+                    translateY.setValue(0);
+                else
+                    Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
             }
         },
     }));
@@ -69,6 +58,10 @@ function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismis
                             maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
                             transform: [{ translateY }],
                         },
-                    ], children: [_jsx(View, { accessibilityElementsHidden: true, className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title || showCloseButton ? (_jsxs(View, { className: "flex-row items-center px-4 pb-1", children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary", semibold: true, variant: "subtitle", children: title })) : null, showCloseButton ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", className: "items-center justify-center rounded-lg", hitSlop: 8, onPress: onClose, style: accessibleSizing ? { minWidth: 48, minHeight: 48 } : undefined, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })) : null] })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4 }, children: children })] })] }) }));
+                    ], children: [_jsx(View, { accessibilityElementsHidden: true, className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title || showCloseButton ? (_jsxs(View, { className: "flex-row items-center px-4 pb-1", children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary", semibold: true, variant: "subtitle", children: title })) : null, showCloseButton ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", className: "items-center justify-center rounded-lg", hitSlop: 8, onPress: onClose, style: { minWidth: 48, minHeight: 48 }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })) : null] })) : null, _jsx(ScrollView, { contentContainerStyle: {
+                                paddingHorizontal: 16,
+                                paddingTop: 4,
+                                paddingBottom: footer ? 12 : 0,
+                            }, style: { flexShrink: 1 }, children: children }), footer ? (_jsx(View, { className: `border-t border-border-light px-4 pt-3 ${footerClassName ?? ""}`, children: footer })) : null] })] }) }));
 }
 export default Sheet;

package/dist/Display/Display.Accordion.js

@@ -1,18 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "./Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useState } from "react";
 import { LayoutAnimation, View } from "react-native";
 function AccordionItem({ title, children, defaultOpen = false, className, testID, }) {
     const [open, setOpen] = useState(defaultOpen);
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const toggle = () => {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        if (!reducedMotion)
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
         setOpen((prev) => !prev);
     };
-    return (_jsxs(View, { className: cn("border-b border-border-default", className), testID: testID, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { expanded: open }, className: "flex-row items-center justify-between py-3", onPress: toggle, children: [_jsx(Typography.Text, { className: "flex-1 text-text-primary", semibold: true, children: title }), _jsx(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] }, children: _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 }) })] }), open ? _jsx(View, { className: "pb-3", children: children }) : null] }));
+    return (_jsxs(View, { className: cn("border-b border-border-default", className), testID: testID, children: [_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { expanded: open }, className: "flex-row items-center justify-between py-3", onPress: toggle, style: { minHeight: 48 }, children: [_jsx(Typography.Text, { className: "flex-1 text-text-primary", semibold: true, children: title }), _jsx(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] }, children: _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 }) })] }), open ? _jsx(View, { className: "pb-3", children: children }) : null] }));
 }
 function AccordionRoot({ children, className }) {
     return _jsx(View, { className: cn("bg-bg-card rounded-lg", className), children: children });

package/dist/Display/Display.AmountSummary.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export interface AmountSummaryRootProps {
+    children: ReactNode;
+    currencySymbol: string;
+    variant?: "card" | "plain";
+    className?: string;
+    testID?: string;
+}
+declare function Root({ children, currencySymbol, variant, className, testID, }: AmountSummaryRootProps): import("react").JSX.Element;
+export interface AmountSummaryRowProps {
+    label: string;
+    value: number | string | null | undefined;
+    currencySymbol?: string;
+    prefix?: string;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    testID?: string;
+}
+declare function Row({ label, value, currencySymbol, prefix, className, labelClassName, valueClassName, testID, }: AmountSummaryRowProps): import("react").JSX.Element;
+export type AmountSummaryTotalProps = AmountSummaryRowProps;
+declare function Total(props: AmountSummaryTotalProps): import("react").JSX.Element;
+declare const AmountSummary: {
+    Root: typeof Root;
+    Row: typeof Row;
+    Total: typeof Total;
+};
+export default AmountSummary;

package/dist/Display/Display.AmountSummary.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { createContext, useContext } from "react";
+import { View } from "react-native";
+import Monetary from "./Display.Monetary";
+const AmountSummaryContext = createContext(undefined);
+function Root({ children, currencySymbol, variant = "card", className, testID, }) {
+    return (_jsx(AmountSummaryContext.Provider, { value: { currencySymbol }, children: _jsx(View, { className: cn("gap-1", variant === "card"
+                ? "rounded-xl border border-border-light bg-bg-card px-4 py-2"
+                : "", className), testID: testID, children: children }) }));
+}
+function Row({ label, value, currencySymbol, prefix, className, labelClassName, valueClassName, testID, }) {
+    const context = useContext(AmountSummaryContext);
+    const resolvedCurrencySymbol = currencySymbol ?? context?.currencySymbol;
+    if (resolvedCurrencySymbol === undefined) {
+        throw new Error("AmountSummary.Row requires a currencySymbol or an AmountSummary.Root.");
+    }
+    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3 py-1", className), testID: testID, children: [_jsx(Typography.Text, { className: cn("flex-1 text-text-secondary", labelClassName), children: label }), _jsx(Monetary, { className: cn("text-text-primary", valueClassName), currencySymbol: resolvedCurrencySymbol, prefix: prefix, semibold: true, textVariant: "body", value: value })] }));
+}
+function Total(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(View, { className: "my-1 border-t border-border-light" }), _jsx(Row, { ...props, className: cn("py-2", props.className), labelClassName: cn("text-text-primary font-semibold", props.labelClassName), valueClassName: cn("text-text-primary", props.valueClassName) })] }));
+}
+const AmountSummary = { Root, Row, Total };
+export default AmountSummary;

package/dist/Display/Display.Carousel.d.ts

@@ -1,6 +1,17 @@
-import { type ReactNode } from "react";
-export interface CarouselProps<T> {
-    data: T[];
+import { Typography } from "../Typography/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+export interface CarouselControlsProps {
+    index: number;
+    count: number;
+    canPrevious: boolean;
+    canNext: boolean;
+    previous: () => void;
+    next: () => void;
+    goTo: (index: number) => void;
+}
+export interface CarouselProps<T> extends Omit<ViewProps, "children"> {
+    data: readonly T[];
     renderItem: (item: T, index: number) => ReactNode;
     keyExtractor: (item: T, index: number) => string;
     itemWidth: number;
@@ -8,6 +19,18 @@ export interface CarouselProps<T> {
     showDots?: boolean;
     className?: string;
     testID?: string;
+    index?: number;
+    onIndexChange?: (index: number) => void;
+    previousAccessibilityLabel?: string;
+    nextAccessibilityLabel?: string;
+    formatPageLabel?: (index: number, count: number) => string;
+    renderControls?: (props: CarouselControlsProps) => ReactNode;
+    controlsClassName?: string;
+    paginationTextProps?: ComponentProps<typeof Typography.Text>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    itemStyle?: StyleProp<ViewStyle>;
+    dotStyle?: StyleProp<ViewStyle>;
+    activeDotStyle?: StyleProp<ViewStyle>;
 }
-declare function Carousel<T>({ data, renderItem, keyExtractor, itemWidth, gap, showDots, className, testID, }: CarouselProps<T>): import("react").JSX.Element;
+declare function Carousel<T>({ data, renderItem, keyExtractor, itemWidth, gap, showDots, className, testID, index: controlledIndex, onIndexChange, previousAccessibilityLabel, nextAccessibilityLabel, formatPageLabel, renderControls, controlsClassName, paginationTextProps, contentContainerStyle, itemStyle, dotStyle, activeDotStyle, ...viewProps }: CarouselProps<T>): import("react").JSX.Element;
 export default Carousel;

package/dist/Display/Display.Carousel.js

@@ -1,19 +1,119 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
-import { cn } from "../theme/tw.js";
-import { useState } from "react";
+import IconButton from "../Actions/Actions.IconButton.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { uniqueKeys } from "../utils/keys.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { useEffect, useRef, useState } from "react";
 import { ScrollView, View, } from "react-native";
-function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDots = true, className, testID, }) {
+function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDots = true, className, testID, index: controlledIndex, onIndexChange, previousAccessibilityLabel = "Elemento anterior", nextAccessibilityLabel = "Elemento siguiente", formatPageLabel = (index, count) => `Elemento ${index + 1} de ${count}`, renderControls, controlsClassName, paginationTextProps, contentContainerStyle, itemStyle, dotStyle, activeDotStyle, ...viewProps }) {
+    if (!Number.isFinite(itemWidth) ||
+        itemWidth <= 0 ||
+        !Number.isFinite(gap) ||
+        gap < 0 ||
+        !Number.isFinite(itemWidth + gap))
+        throw new RangeError("Carousel requires a positive finite itemWidth and a non-negative finite gap.");
+    if (controlledIndex !== undefined &&
+        (!Number.isInteger(controlledIndex) || controlledIndex < 0))
+        throw new RangeError("Carousel index must be a non-negative integer.");
+    if (controlledIndex !== undefined && !onIndexChange)
+        throw new Error("Carousel requires onIndexChange when index is controlled.");
+    const keys = uniqueKeys(data, keyExtractor, "Carousel");
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const [active, setActive] = useState(0);
+    const [viewportWidth, setViewportWidth] = useState(0);
+    const [scrollRevision, setScrollRevision] = useState(0);
+    const scrollRef = useRef(null);
+    const mounted = useRef(false);
     const snap = itemWidth + gap;
-    const onScroll = (e) => {
-        const index = Math.round(e.nativeEvent.contentOffset.x / snap);
-        if (index !== active)
-            setActive(index);
+    const current = Math.min(controlledIndex ?? active, Math.max(0, data.length - 1));
+    const nativePosition = useRef({ index: 0, snap, count: data.length, width: 0 });
+    if (controlledIndex === undefined && active !== current)
+        setActive(current);
+    useEffect(() => {
+        const previous = nativePosition.current;
+        if (previous.index !== current ||
+            previous.snap !== snap ||
+            previous.width !== viewportWidth) {
+            scrollRef.current?.scrollTo({
+                x: current * snap,
+                y: 0,
+                animated: mounted.current &&
+                    !reducedMotion &&
+                    previous.snap === snap &&
+                    previous.count === data.length &&
+                    previous.width === viewportWidth,
+            });
+        }
+        nativePosition.current = {
+            index: current,
+            snap,
+            count: data.length,
+            width: viewportWidth,
+        };
+        mounted.current = true;
+        if (controlledIndex === undefined &&
+            previous.count > data.length &&
+            previous.index !== current) {
+            onIndexChange?.(current);
+        }
+    }, [
+        active,
+        current,
+        controlledIndex,
+        data.length,
+        onIndexChange,
+        reducedMotion,
+        snap,
+        viewportWidth,
+        scrollRevision,
+    ]);
+    const changeIndex = (next) => {
+        setActive(next);
+        if (next !== current)
+            onIndexChange?.(next);
     };
-    return (_jsxs(View, { className: className, testID: testID, children: [_jsx(ScrollView, { decelerationRate: "fast", horizontal: true, onMomentumScrollEnd: onScroll, showsHorizontalScrollIndicator: false, snapToInterval: snap, children: data.map((item, index) => (_jsx(View, { style: { width: itemWidth, marginRight: index < data.length - 1 ? gap : 0 }, children: renderItem(item, index) }, keyExtractor(item, index)))) }), showDots && data.length > 1 ? (_jsx(View, { className: "flex-row justify-center gap-1.5 mt-3", children: data.map((item, index) => (_jsx(View, { className: cn("h-1.5 rounded-full"), style: {
-                        width: index === active ? 16 : 6,
-                        backgroundColor: index === active ? theme.primary : theme.border.strong,
-                    } }, keyExtractor(item, index)))) })) : null] }));
+    const goTo = (next) => {
+        if (!Number.isInteger(next) || next < 0 || next >= data.length)
+            throw new RangeError("Carousel goTo requires an index within the current data.");
+        changeIndex(next);
+    };
+    const onScroll = (event) => {
+        const offset = event.nativeEvent.contentOffset.x;
+        if (!Number.isFinite(offset))
+            throw new RangeError("Carousel received a non-finite scroll offset.");
+        const next = Math.max(0, Math.min(Math.round(offset / snap), data.length - 1));
+        nativePosition.current = { index: next, snap, count: data.length, width: viewportWidth };
+        changeIndex(next);
+        if (controlledIndex !== undefined)
+            setScrollRevision((revision) => revision + 1);
+    };
+    const controls = {
+        index: current,
+        count: data.length,
+        canPrevious: current > 0,
+        canNext: current < data.length - 1,
+        previous: () => {
+            if (current > 0)
+                goTo(current - 1);
+        },
+        next: () => {
+            if (current < data.length - 1)
+                goTo(current + 1);
+        },
+        goTo,
+    };
+    return (_jsxs(View, { ...viewProps, className: className, testID: testID, children: [_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, decelerationRate: "fast", horizontal: true, onLayout: (event) => setViewportWidth(event.nativeEvent.layout.width), onMomentumScrollEnd: onScroll, ref: scrollRef, showsHorizontalScrollIndicator: false, snapToInterval: snap, testID: testID ? `${testID}-scroll` : undefined, children: [data.map((item, index) => (_jsx(View, { style: [
+                            itemStyle,
+                            { width: itemWidth, marginRight: index < data.length - 1 ? gap : 0 },
+                        ], children: renderItem(item, index) }, keys[index]))), data.length > 0 ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { width: Math.max(0, viewportWidth - itemWidth) }, testID: testID ? `${testID}-end-spacing` : undefined })) : null] }), showDots && data.length > 1 ? (_jsx(View, { accessibilityElementsHidden: true, className: "flex-row justify-center gap-1.5 mt-3", importantForAccessibility: "no-hide-descendants", children: data.map((_item, index) => (_jsx(View, { className: "h-1.5 rounded-full", style: [
+                        {
+                            width: index === current ? 16 : 6,
+                            backgroundColor: index === current ? theme.primary : theme.border.strong,
+                        },
+                        dotStyle,
+                        index === current ? activeDotStyle : undefined,
+                    ] }, keys[index]))) })) : null, data.length > 1 ? (renderControls ? (renderControls(controls)) : (_jsxs(View, { className: controlsClassName ?? "flex-row items-center justify-center gap-3 mt-2", children: [_jsx(IconButton, { accessibilityLabel: previousAccessibilityLabel, disabled: !controls.canPrevious, icon: "chevron-left", onPress: controls.previous }), _jsx(Typography.Text, { ...paginationTextProps, accessibilityLiveRegion: "polite", children: formatPageLabel(current, data.length) }), _jsx(IconButton, { accessibilityLabel: nextAccessibilityLabel, disabled: !controls.canNext, icon: "chevron-right", onPress: controls.next })] }))) : null] }));
 }
 export default Carousel;

package/dist/Display/Display.ExpoImage.d.ts

@@ -0,0 +1,8 @@
+import { Image } from "expo-image";
+import type { ComponentPropsWithRef } from "react";
+export type ExpoImageProps = Omit<ComponentPropsWithRef<typeof Image>, "resizeMode" | "defaultSource" | "loadingIndicatorSource"> & {
+    className?: string;
+};
+declare function ExpoImage({ cachePolicy, transition, autoplay, sfEffect, onError, source, recyclingKey, ...props }: ExpoImageProps): import("react").JSX.Element;
+export default ExpoImage;
+export { ExpoImage };

package/dist/Display/Display.ExpoImage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { imageSourceKey } from "../utils/image.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { Image } from "expo-image";
+import { cssInterop } from "nativewind";
+const StyledImage = cssInterop(Image, { className: "style" });
+function ExpoImage({ cachePolicy = "disk", transition = 0, autoplay = true, sfEffect, onError, source, recyclingKey, ...props }) {
+    const reducedMotion = useReducedMotion();
+    return (_jsx(StyledImage, { ...props, autoplay: autoplay && !reducedMotion, cachePolicy: cachePolicy, onError: (event) => {
+            console.error("[ExpoImage] Image load failed", event.error);
+            onError?.(event);
+        }, recyclingKey: recyclingKey === undefined ? imageSourceKey(source) : recyclingKey, sfEffect: reducedMotion ? null : sfEffect, source: source, transition: reducedMotion ? 0 : transition }));
+}
+export default ExpoImage;
+export { ExpoImage };