@sincpro/mobile-ui 1.1.0 → 2.0.1

package/dist/Actions/Actions.FAB.d.ts

@@ -6,7 +6,6 @@ export interface FABProps {
     className?: string;
     testID?: string;
     accessibilityLabel?: string;
-    accessibleSizing?: boolean;
 }
-declare function FAB({ icon, onPress, label, position, className, testID, accessibilityLabel, accessibleSizing, }: FABProps): import("react").JSX.Element;
+declare function FAB({ icon, onPress, label, position, className, testID, accessibilityLabel, }: FABProps): import("react").JSX.Element;
 export default FAB;

package/dist/Actions/Actions.FAB.js

@@ -5,17 +5,15 @@ import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function FAB({ icon, onPress, label, position = "bottom-right", className, testID, accessibilityLabel, accessibleSizing = false, }) {
+function FAB({ icon, onPress, label, position = "bottom-right", className, testID, accessibilityLabel, }) {
     const insets = useSafeAreaInsets();
-    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label
-            ? accessibleSizing
-                ? "min-h-14 px-5 py-3 gap-2"
-                : "h-14 px-5 gap-2"
-            : "w-14 h-14", className), onPress: onPress, style: {
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label ? "min-h-14 px-5 py-3 gap-2" : "w-14 h-14", className), onPress: onPress, style: {
+            minHeight: 56,
+            minWidth: 56,
             bottom: insets.bottom + 16,
             right: position === "bottom-right" ? 16 : undefined,
             left: position === "bottom-left" ? 16 : undefined,
             ...theme.shadow.lg,
-        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", style: accessibleSizing ? { flexShrink: 1 } : undefined, children: label })) : null] }));
+        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", style: { flexShrink: 1 }, children: label })) : null] }));
 }
 export default FAB;

package/dist/Actions/Actions.IconButton.d.ts

@@ -64,7 +64,6 @@ export interface IconButtonProps extends VariantProps<typeof iconButton>, Access
     iconColor?: string;
     className?: string;
     testID?: string;
-    accessibleSizing?: boolean;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibleSizing, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;

package/dist/Actions/Actions.IconButton.js

@@ -31,12 +31,12 @@ const iconButton = tv({
         disabled: false,
     },
 });
-function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, accessibleSizing = false, accessibilityState, ...accessibilityProps }) {
+function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, accessibilityState, ...accessibilityProps }) {
     const resolvedColor = iconColor ?? theme.text.accent;
     return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
             ...accessibilityState,
             disabled: disabled || loading,
             busy: loading,
-        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
 }
 export default IconButton;

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;