@sincpro/mobile-ui 1.0.1 → 2.0.0

package/dist/Dialog/Dialog.ActionSheet.js

@@ -1,32 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { themeToVars, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { useEffect, useRef } from "react";
-import { Animated, Modal, Pressable as RNPressable, View } from "react-native";
+import { useSheetTranslation } from "../utils/useSheetTranslation.js";
+import { vars } from "nativewind";
+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", }) {
+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]);
-    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: onClose, children: _jsx(Animated.View, { style: { transform: [{ translateY }] }, children: _jsxs(RNPressable, { style: { paddingHorizontal: 12, paddingBottom: insets.bottom + 12 }, children: [title || message ? (_jsxs(View, { className: "rounded-xl mb-2 px-4 py-3 items-center", style: { backgroundColor: theme.bg.card }, children: [title ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, children: title })) : null, message ? (_jsx(Typography.Text, { className: "text-text-secondary text-sm", variant: "bodySmall", children: message })) : null] })) : null, _jsx(View, { className: "rounded-xl overflow-hidden mb-2", style: { backgroundColor: theme.bg.card }, children: actions.map((action, index) => (_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: action.disabled }, className: cn("flex-row items-center justify-center gap-2 px-4 py-4", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled, onPress: () => {
+    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)),
+                        {
+                            transform: [{ translateY }],
+                            maxHeight: "90%",
+                            paddingHorizontal: 12,
+                            paddingBottom: insets.bottom + 12,
+                        },
+                    ], children: [title || message ? (_jsxs(View, { className: "rounded-xl mb-2 px-4 py-3 items-center", style: { backgroundColor: theme.bg.card }, children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "text-text-primary", semibold: true, children: title })) : null, message ? (_jsx(Typography.Text, { className: "text-text-secondary text-sm", variant: "bodySmall", children: message })) : null] })) : null, _jsx(ScrollView, { bounces: false, className: "rounded-xl overflow-hidden mb-2", style: { backgroundColor: theme.bg.card }, children: actions.map((action, index) => (_jsxs(Pressable, { accessibilityLabel: action.label, accessibilityRole: "button", accessibilityState: { disabled: action.disabled }, className: cn("flex-row items-center justify-center gap-2 px-4 py-4", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled, onPress: () => {
                                     onClose();
                                     action.onPress();
-                                }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card }, children: _jsx(Typography.Text, { className: "text-text-accent", semibold: true, children: cancelLabel }) })] }) }) }) }));
+                                }, style: { minHeight: 48 }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityLabel: cancelLabel, accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card, minHeight: 48 }, children: _jsx(Typography.Text, { className: "text-text-accent", semibold: true, children: cancelLabel }) })] })] }) }));
 }
 export default ActionSheet;

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 = "cambios", subtitle = "¿Estás seguro de que quieres descartar los cambios realizados?", confirmButtonText = "Sí", cancelButtonText = "No, continuar aquí", }) => {
-    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, { className: "p-3 w-full max-w-xs mx-auto", style: {
-                            borderRadius: 16,
-                            backgroundColor: theme.bg.popover,
-                            ...theme.shadow.md,
-                        }, children: [_jsx(Typography, { 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 ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "Descartar cambios", subtitle = "¿Quieres descartar los cambios realizados?", confirmButtonText = "Descartar cambios", cancelButtonText = "Seguir editando", }) => {
+    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.NativeSheet.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface NativeSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    testID?: string;
+}
+declare function NativeSheet({ visible, onClose, title, children, testID }: NativeSheetProps): import("react").JSX.Element;
+export default NativeSheet;

package/dist/Dialog/Dialog.NativeSheet.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import BottomSheet, { BottomSheetView } from "@expo/ui/community/bottom-sheet";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { vars } from "nativewind";
+import { ScrollView, View } from "react-native";
+const SNAP_POINTS = ["60%", "90%"];
+function NativeSheet({ visible, onClose, title, children, testID }) {
+    const theme = useTheme();
+    return (_jsx(BottomSheet, { backgroundStyle: { backgroundColor: theme.bg.card }, enablePanDownToClose: true, index: visible ? 0 : -1, onClose: () => {
+            if (visible)
+                onClose();
+        }, snapPoints: SNAP_POINTS, children: _jsx(BottomSheetView, { style: { flex: 1 }, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: [vars(themeToVars(theme)), { flex: 1, padding: 16 }], testID: testID, children: [_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(Typography.Heading, { className: "flex-1", variant: "h4", children: title }), _jsx(Pressable, { accessibilityLabel: "Cerrar", onPress: onClose, style: {
+                                    minHeight: 48,
+                                    minWidth: 48,
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })] }), _jsx(ScrollView, { contentContainerStyle: { paddingVertical: 12 }, keyboardShouldPersistTaps: "handled", children: children })] }) }) }));
+}
+export default NativeSheet;

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

@@ -10,11 +10,15 @@ 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;
     /** Allow closing by tapping the dim backdrop. Default `false` (handle/button only). */
     dismissOnBackdrop?: boolean;
+    /** Show a visible close button in the sheet header. */
+    showCloseButton?: boolean;
     testID?: string;
 }
 /**
@@ -22,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, 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

@@ -3,9 +3,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "nativewind/js
 // This file uses the canonical RN patterns: useRef(new Animated.Value()).current and PanResponder
 // created inside useState. Those hooks rules warn — they're not bugs here. Documented at the
 // eslint config level (see eslint.config.js:30-33).
-import { theme } from "../theme/index.js";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { useEffect, useRef, useState } from "react";
+import { useSheetTranslation } from "../utils/useSheetTranslation.js";
+import { vars } from "nativewind";
+import { useRef, useState } from "react";
 import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
@@ -20,49 +23,45 @@ 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, 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();
             }
         },
     }));
-    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, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { className: "rounded-t-3xl", style: {
-                        backgroundColor: theme.bg.card,
-                        paddingBottom: insets.bottom + 12,
-                        maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
-                        transform: [{ translateY }],
-                    }, children: [_jsx(View, { className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 pb-1", semibold: true, variant: "subtitle", children: title })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4 }, children: children })] })] }) }));
+    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, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: onClose, style: [
+                        vars(themeToVars(theme)),
+                        {
+                            backgroundColor: theme.bg.card,
+                            paddingBottom: insets.bottom + 12,
+                            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: { 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.CopyableText.d.ts

@@ -1,4 +1,4 @@
-type CopyableTextProps = {
+export type CopyableTextProps = ({
     value: string;
     getValue?: never;
     label?: string;
@@ -8,6 +8,13 @@ type CopyableTextProps = {
     getValue: () => string;
     label?: string;
     className?: string;
+}) & {
+    accessibilityLabel?: string;
+    testID?: string;
+    disabled?: boolean;
+    onCopied?: (value: string) => void;
+    onCopyError?: (error: Error) => void;
+    selectable?: boolean;
 };
-declare function CopyableText({ value, getValue, label, className }: CopyableTextProps): import("react").JSX.Element;
+declare function CopyableText({ value, getValue, label, className, accessibilityLabel, testID, disabled, onCopied, onCopyError, selectable, }: CopyableTextProps): import("react").JSX.Element;
 export default CopyableText;