@sincpro/mobile-ui 1.1.0 → 2.0.0

package/dist/Display/Display.Image.d.ts

@@ -1,15 +1,19 @@
-import { type ImageResizeMode, type ImageSourcePropType, type ImageStyle } from "react-native";
-export interface DisplayImageProps {
-    source: ImageSourcePropType;
+import { type ExpoImageProps } from "./Display.ExpoImage.js";
+import { type ImageSource } from "../utils/image.js";
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface DisplayImageProps extends Omit<ExpoImageProps, "source" | "style"> {
+    source: ImageSource;
     width?: number | `${number}%`;
     height?: number;
     aspectRatio?: number;
     radius?: number;
-    resizeMode?: ImageResizeMode;
     fallbackIcon?: string;
     className?: string;
-    style?: ImageStyle;
+    style?: ExpoImageProps["style"];
+    containerStyle?: StyleProp<ViewStyle>;
+    renderError?: (retry: () => void) => ReactNode;
     testID?: string;
 }
-declare function DisplayImage({ source, width, height, aspectRatio, radius, resizeMode, fallbackIcon, className, style, testID, }: DisplayImageProps): import("react").JSX.Element;
+declare function DisplayImage(props: DisplayImageProps): import("react").JSX.Element;
 export default DisplayImage;

package/dist/Display/Display.Image.js

@@ -1,17 +1,50 @@
+import { createElement as _createElement } from "nativewind";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Skeleton from "../Feedback/Feedback.Skeleton.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
-import { useState } from "react";
-import { Image, View, } from "react-native";
-function DisplayImage({ source, width = "100%", height, aspectRatio, radius = 12, resizeMode = "cover", fallbackIcon = "image-outline", className, style, testID, }) {
+import { imageSourceKey } from "../utils/image.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { View } from "react-native";
+function ImageContent({ source, width = "100%", height, aspectRatio, radius = 12, contentFit = "cover", placeholder, fallbackIcon = "image-outline", className, style, containerStyle, renderError, testID, onError, onLoadStart, onLoadEnd, onLoad, accessibilityLabel, accessible, retry, ...imageProps }) {
+    const theme = useTheme();
     const [loading, setLoading] = useState(true);
     const [failed, setFailed] = useState(false);
+    const active = useRef(true);
+    useLayoutEffect(() => {
+        active.current = true;
+        return () => {
+            active.current = false;
+        };
+    }, []);
     const dimensions = { width, height, aspectRatio, borderRadius: radius };
-    return (_jsx(View, { className: cn("overflow-hidden bg-bg-muted", className), style: dimensions, testID: testID, children: failed ? (_jsx(View, { className: "flex-1 items-center justify-center", children: _jsx(Icon, { color: theme.icon.disabled, name: fallbackIcon, size: 32 }) })) : (_jsxs(_Fragment, { children: [_jsx(Image, { onError: () => {
+    return (_jsx(View, { className: cn("overflow-hidden bg-bg-muted", className), style: [dimensions, containerStyle], testID: testID, children: failed ? (renderError ? (renderError(retry)) : (_jsx(View, { accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}. Imagen no disponible` : undefined, accessibilityRole: "image", accessible: accessible ?? !!accessibilityLabel, className: "flex-1 items-center justify-center", children: _jsx(Icon, { color: theme.icon.disabled, name: fallbackIcon, size: 32 }) }))) : (_jsxs(_Fragment, { children: [_jsx(ExpoImage, { ...imageProps, accessibilityLabel: accessibilityLabel, accessible: accessible, contentFit: contentFit, onError: (event) => {
+                        if (!active.current)
+                            return;
                         setFailed(true);
                         setLoading(false);
-                    }, onLoadEnd: () => setLoading(false), resizeMode: resizeMode, source: source, style: [{ width: "100%", height: "100%" }, style] }), loading ? (_jsx(View, { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: _jsx(Skeleton, { height: "100%", radius: radius, width: "100%" }) })) : null] })) }));
+                        onError?.(event);
+                    }, onLoad: (event) => {
+                        if (!active.current)
+                            return;
+                        setLoading(false);
+                        onLoad?.(event);
+                    }, onLoadEnd: () => {
+                        if (!active.current)
+                            return;
+                        setLoading(false);
+                        onLoadEnd?.();
+                    }, onLoadStart: () => {
+                        if (!active.current)
+                            return;
+                        setLoading(true);
+                        onLoadStart?.();
+                    }, placeholder: placeholder, placeholderContentFit: imageProps.placeholderContentFit ?? contentFit, source: source, style: [{ width: "100%", height: "100%" }, style] }), loading && !placeholder ? (_jsx(View, { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: _jsx(Skeleton, { height: "100%", radius: radius, width: "100%" }) })) : null] })) }));
+}
+function DisplayImage(props) {
+    const [attempt, setAttempt] = useState(0);
+    return (_createElement(ImageContent, { ...props, key: `${imageSourceKey(props.source)}:${attempt}`, retry: () => setAttempt((current) => current + 1) }));
 }
 export default DisplayImage;

package/dist/Display/Display.ListItem.d.ts

@@ -14,7 +14,6 @@ export interface ListItemProps {
     showDivider?: boolean;
     className?: string;
     testID?: string;
-    accessibleSizing?: boolean;
     accessibilityLabel?: string;
     accessibilityHint?: string;
     disabled?: boolean;
@@ -27,5 +26,5 @@ export interface ListItemProps {
     subtitleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
     valueTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
 }
-declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, accessibleSizing, accessibilityLabel, accessibilityHint, disabled, variant, value, layout, density, style, titleTextProps, subtitleTextProps, valueTextProps, }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, accessibilityLabel, accessibilityHint, disabled, variant, value, layout, density, style, titleTextProps, subtitleTextProps, valueTextProps, }: ListItemProps): import("react").JSX.Element;
 export default ListItem;

package/dist/Display/Display.ListItem.js

@@ -5,7 +5,7 @@ import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Pressable as NativePressable, useWindowDimensions, View, } from "react-native";
-function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider, className, testID, accessibleSizing = false, accessibilityLabel, accessibilityHint, disabled = false, variant = "default", value, layout = "auto", density = "compact", style, titleTextProps, subtitleTextProps, valueTextProps, }) {
+function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider, className, testID, accessibilityLabel, accessibilityHint, disabled = false, variant = "default", value, layout = "auto", density = "compact", style, titleTextProps, subtitleTextProps, valueTextProps, }) {
     const theme = useTheme();
     const { width, fontScale } = useWindowDimensions();
     const mobile = variant === "mobile";
@@ -15,7 +15,7 @@ function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress
         (layout === "stacked" || (layout === "auto" && (fontScale > 1.3 || width < 360)));
     const right = trailing ??
         (value || chevron ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [value ? (_jsx(Typography.Text, { className: "text-text-secondary flex-shrink", variant: comfortable ? "bodyReadable" : "body", ...valueTextProps, children: value })) : null, chevron ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) })) : null] })) : null);
-    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: cn("flex-1", mobile ? "min-w-0 gap-1" : "gap-0.5"), children: [_jsx(Typography.Text, { className: mobile && disabled ? "text-text-disabled" : "text-text-primary", numberOfLines: mobile || accessibleSizing ? undefined : 1, semibold: !mobile || comfortable, variant: comfortable ? "bodyReadable" : "body", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: mobile || accessibleSizing ? undefined : 1, variant: comfortable ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null, stacked && right ? _jsx(View, { className: "self-start mt-1", children: right }) : null] }), !stacked && right ? (_jsx(View, { className: cn("ml-3 justify-center", mobile && "flex-shrink"), style: mobile ? { maxWidth: "45%" } : undefined, children: right })) : null] }));
+    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: cn("flex-1", mobile ? "min-w-0 gap-1" : "gap-0.5"), children: [_jsx(Typography.Text, { className: mobile && disabled ? "text-text-disabled" : "text-text-primary", semibold: !mobile || comfortable, variant: comfortable ? "bodyReadable" : "body", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: comfortable ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null, stacked && right ? _jsx(View, { className: "self-start mt-1", children: right }) : null] }), !stacked && right ? (_jsx(View, { className: cn("ml-3 justify-center", mobile && "flex-shrink"), style: mobile ? { maxWidth: "45%" } : undefined, children: right })) : null] }));
     const base = cn("flex-row items-center px-4", mobile && !comfortable ? "py-2" : "py-3", !mobile && "bg-bg-card", (showDivider ?? !mobile) && "border-b border-border-default", disabled && !mobile && "opacity-50", className);
     if (onPress) {
         if (mobile) {
@@ -28,7 +28,7 @@ function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress
                     style,
                 ], testID: testID, children: content }));
         }
-        return (_jsx(Pressable, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, className: base, disabled: disabled, onPress: onPress, style: [accessibleSizing ? { minHeight: 48 } : undefined, style], testID: testID, children: content }));
+        return (_jsx(Pressable, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, className: base, disabled: disabled, onPress: onPress, style: [{ minHeight: 48, minWidth: 48 }, style], testID: testID, children: content }));
     }
     return (_jsx(View, { className: base, style: style, testID: testID, children: content }));
 }

package/dist/Display/Display.Logo.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "../theme/tw.js";
+import type { ImageSource } from "../utils/image.js";
 import { FC } from "react";
-import { type ImageSourcePropType } from "react-native";
 declare const logo: import("tailwind-variants").TVReturnType<{
     size: {
         small: {
@@ -48,7 +48,7 @@ declare const logo: import("tailwind-variants").TVReturnType<{
     image: string;
 }>>;
 export interface LogoProps extends VariantProps<typeof logo> {
-    source?: ImageSourcePropType;
+    source?: ImageSource;
     className?: string;
 }
 declare const Logo: FC<LogoProps>;

package/dist/Display/Display.Logo.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { getBrandingLogo } from "../branding.js";
+import ExpoImage from "./Display.ExpoImage.js";
 import { tv } from "../theme/tw.js";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 const logo = tv({
     slots: {
         container: "items-center justify-center",
@@ -28,7 +29,7 @@ function renderImage(imageClassName, source) {
     if (!source) {
         return null;
     }
-    return _jsx(Image, { className: imageClassName, resizeMode: "contain", source: source });
+    return _jsx(ExpoImage, { className: imageClassName, contentFit: "contain", source: source });
 }
 const Logo = ({ source, size = "medium", className }) => {
     const styles = logo({ size });

package/dist/Display/Display.MediaCard.d.ts

@@ -1,7 +1,7 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface MediaCardProps {
-    image: ImageSourcePropType;
+    image: ImageSource;
     title?: string;
     subtitle?: string;
     badge?: ReactNode;

package/dist/Display/Display.MediaEmbed.d.ts

@@ -1,7 +1,7 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface MediaEmbedProps {
-    thumbnail: ImageSourcePropType;
+    thumbnail: ImageSource;
     onPress: () => void;
     duration?: string;
     title?: string;

package/dist/Display/Display.ProductCard.d.ts

@@ -1,8 +1,8 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface ProductCardProps {
     title: string;
-    image: ImageSourcePropType;
+    image: ImageSource;
     price: number;
     originalPrice?: number;
     currency?: string;

package/dist/Display/Display.Story.d.ts

@@ -1,11 +1,11 @@
-import { type ImageSourcePropType } from "react-native";
+import type { ImageSource } from "../utils/image.js";
 export interface StoryProps {
-    image: ImageSourcePropType;
+    image: ImageSource;
     label?: string;
     seen?: boolean;
     variant?: "circle" | "card";
     size?: number;
-    avatar?: ImageSourcePropType;
+    avatar?: ImageSource;
     /** Mostrar el círculo del autor en la card. `false` = card de historia sin avatar. */
     showAvatar?: boolean;
     onPress?: () => void;

package/dist/Display/Display.Story.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
 import Pressable from "../primitives/Pressable.js";
 import { theme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { LinearGradient } from "expo-linear-gradient";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 const RING = ["#F58529", "#DD2A7B"];
 function Story({ image, label, seen = false, variant = "circle", size = 68, avatar, showAvatar = true, onPress, testID, }) {
     if (variant === "card") {
-        return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { width: size * 1.6, borderRadius: 14, overflow: "hidden" }, testID: testID, children: [_jsx(Image, { source: image, style: { width: "100%", height: size * 2.6 } }), showAvatar ? (_jsx(View, { style: {
+        return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { width: size * 1.6, borderRadius: 14, overflow: "hidden" }, testID: testID, children: [_jsx(ExpoImage, { source: image, style: { width: "100%", height: size * 2.6 } }), showAvatar ? (_jsx(View, { style: {
                         position: "absolute",
                         top: 8,
                         left: 8,
                         borderRadius: 999,
                         borderWidth: 3,
                         borderColor: seen ? theme.border.strong : theme.primary,
-                    }, children: _jsx(Image, { source: avatar ?? image, style: { width: 34, height: 34, borderRadius: 17 } }) })) : null, label ? (_jsx(LinearGradient, { colors: ["transparent", "rgba(0,0,0,0.7)"], style: {
+                    }, children: _jsx(ExpoImage, { source: avatar ?? image, style: { width: 34, height: 34, borderRadius: 17 } }) })) : null, label ? (_jsx(LinearGradient, { colors: ["transparent", "rgba(0,0,0,0.7)"], style: {
                         position: "absolute",
                         left: 0,
                         right: 0,
@@ -38,6 +39,6 @@ function Story({ image, label, seen = false, variant = "circle", size = 68, avat
                         backgroundColor: theme.bg.card,
                         alignItems: "center",
                         justifyContent: "center",
-                    }, children: _jsx(Image, { source: image, style: { width: innerSize, height: innerSize, borderRadius: innerSize / 2 } }) }) }), label ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: label })) : null] }));
+                    }, children: _jsx(ExpoImage, { source: image, style: { width: innerSize, height: innerSize, borderRadius: innerSize / 2 } }) }) }), label ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: label })) : null] }));
 }
 export default Story;

package/dist/Display/Display.StoryTray.d.ts

@@ -1,14 +1,14 @@
-import { type ImageSourcePropType } from "react-native";
+import type { ImageSource } from "../utils/image.js";
 export interface StoryTrayItem {
     id: string;
-    image: ImageSourcePropType;
+    image: ImageSource;
     label?: string;
-    avatar?: ImageSourcePropType;
+    avatar?: ImageSource;
     seen?: boolean;
 }
 export interface StoryTrayCreate {
     label?: string;
-    image?: ImageSourcePropType;
+    image?: ImageSource;
     onPress: () => void;
 }
 export interface StoryTrayProps {

package/dist/Display/Display.StoryTray.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Story from "./Display.Story.js";
 import Pressable from "../primitives/Pressable.js";
 import { theme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { Image, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 function CreateCard({ create, size }) {
     const w = size * 1.6;
     return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: {
@@ -14,7 +15,7 @@ function CreateCard({ create, size }) {
             backgroundColor: theme.bg.card,
             borderWidth: 1,
             borderColor: theme.border.light,
-        }, children: [create.image ? (_jsx(Image, { source: create.image, style: { width: "100%", height: size * 1.7 } })) : (_jsx(View, { style: { width: "100%", height: size * 1.7, backgroundColor: theme.bg.muted } })), _jsxs(View, { style: { alignItems: "center", paddingVertical: 14 }, children: [_jsx(View, { style: {
+        }, children: [create.image ? (_jsx(ExpoImage, { source: create.image, style: { width: "100%", height: size * 1.7 } })) : (_jsx(View, { style: { width: "100%", height: size * 1.7, backgroundColor: theme.bg.muted } })), _jsxs(View, { style: { alignItems: "center", paddingVertical: 14 }, children: [_jsx(View, { style: {
                             position: "absolute",
                             top: -16,
                             width: 32,

package/dist/Display/Display.StoryViewer.d.ts

@@ -1,7 +1,7 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface StoryViewerSlide {
-    image: ImageSourcePropType;
+    image: ImageSource;
 }
 export interface StoryViewerProps {
     visible: boolean;
@@ -12,7 +12,7 @@ export interface StoryViewerProps {
     title: string;
     subtitle?: string;
     time?: string;
-    avatar?: ImageSourcePropType;
+    avatar?: ImageSource;
     progress?: number;
     muted?: boolean;
     paused?: boolean;

package/dist/Display/Display.StoryViewer.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
 import { theme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { LinearGradient } from "expo-linear-gradient";
-import { Image, Modal, Pressable as RNPressable, View, } from "react-native";
+import { Modal, Pressable as RNPressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, subtitle, time, avatar, progress = 1, muted, paused, onToggleMute, onTogglePause, onMore, footer, testID, }) {
     const insets = useSafeAreaInsets();
+    const reducedMotion = useReducedMotion();
     const current = slides[index];
     const goPrev = () => {
         if (index > 0)
@@ -21,7 +24,7 @@ function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, su
     };
     if (!current)
         return null;
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true, transparent: false, visible: visible, children: _jsxs(View, { style: { flex: 1, backgroundColor: "#000" }, testID: testID, children: [_jsx(Image, { resizeMode: "contain", source: current.image, style: {
+    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onClose, statusBarTranslucent: true, transparent: false, visible: visible, children: _jsxs(View, { style: { flex: 1, backgroundColor: "#000" }, testID: testID, children: [_jsx(ExpoImage, { contentFit: "contain", source: current.image, style: {
                         position: "absolute",
                         top: 0,
                         left: 0,
@@ -57,7 +60,7 @@ function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, su
                                                 ? `${Math.round(progress * 100)}%`
                                                 : "0%",
                                         backgroundColor: "#fff",
-                                    } }) }, i))) }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", marginTop: 12 }, children: [avatar ? (_jsx(Image, { source: avatar, style: { width: 36, height: 36, borderRadius: 18, marginRight: 8 } })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [_jsx(Typography.Text, { className: "text-white", semibold: true, variant: "body", children: title }), time ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.7)" }, variant: "caption", children: time })) : null] }), subtitle ? (_jsx(Typography.Text, { numberOfLines: 1, style: { color: "rgba(255,255,255,0.8)" }, variant: "caption", children: subtitle })) : null] }), onToggleMute ? (_jsx(Pressable, { accessibilityLabel: muted ? "Activar sonido" : "Silenciar", hitSlop: 8, onPress: onToggleMute, children: _jsx(Icon, { color: "#fff", name: muted ? "volume-mute" : "volume-high", size: 22 }) })) : null, onTogglePause ? (_jsx(Pressable, { accessibilityLabel: paused ? "Reanudar" : "Pausar", hitSlop: 8, onPress: onTogglePause, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: paused ? "play" : "pause", size: 22 }) })) : null, onMore ? (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", hitSlop: 8, onPress: onMore, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "ellipsis-horizontal", size: 22 }) })) : null, _jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "close", size: 24 }) })] })] }), index < slides.length - 1 ? (_jsx(Pressable, { accessibilityLabel: "Siguiente", onPress: goNext, style: {
+                                    } }) }, i))) }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", marginTop: 12 }, children: [avatar ? (_jsx(ExpoImage, { source: avatar, style: { width: 36, height: 36, borderRadius: 18, marginRight: 8 } })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [_jsx(Typography.Text, { className: "text-white", semibold: true, variant: "body", children: title }), time ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.7)" }, variant: "caption", children: time })) : null] }), subtitle ? (_jsx(Typography.Text, { numberOfLines: 1, style: { color: "rgba(255,255,255,0.8)" }, variant: "caption", children: subtitle })) : null] }), onToggleMute ? (_jsx(Pressable, { accessibilityLabel: muted ? "Activar sonido" : "Silenciar", hitSlop: 8, onPress: onToggleMute, children: _jsx(Icon, { color: "#fff", name: muted ? "volume-mute" : "volume-high", size: 22 }) })) : null, onTogglePause ? (_jsx(Pressable, { accessibilityLabel: paused ? "Reanudar" : "Pausar", hitSlop: 8, onPress: onTogglePause, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: paused ? "play" : "pause", size: 22 }) })) : null, onMore ? (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", hitSlop: 8, onPress: onMore, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "ellipsis-horizontal", size: 22 }) })) : null, _jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "close", size: 24 }) })] })] }), index < slides.length - 1 ? (_jsx(Pressable, { accessibilityLabel: "Siguiente", onPress: goNext, style: {
                         position: "absolute",
                         right: 8,
                         top: "50%",

package/dist/Display/index.d.ts

@@ -8,6 +8,7 @@ import CountRecords from "./Display.CountRecords.js";
 import DataTable from "./Display.DataTable.js";
 import Date from "./Display.Date.js";
 import Divider from "./Display.Divider.js";
+import ExpoImage from "./Display.ExpoImage.js";
 import GradientSurface from "./Display.GradientSurface.js";
 import IconBadge from "./Display.IconBadge.js";
 import DisplayImage from "./Display.Image.js";
@@ -37,6 +38,11 @@ import Tag from "./Display.Tag.js";
 import Timeline from "./Display.Timeline.js";
 import Tooltip from "./Display.Tooltip.js";
 export declare const Display: {
+    AmountSummary: {
+        Root: ({ children, currencySymbol, variant, className, testID, }: import("./Display.AmountSummary.js").AmountSummaryRootProps) => import("react").JSX.Element;
+        Row: ({ label, value, currencySymbol, prefix, className, labelClassName, valueClassName, testID, }: import("./Display.AmountSummary.js").AmountSummaryRowProps) => import("react").JSX.Element;
+        Total: (props: import("./Display.AmountSummary.js").AmountSummaryTotalProps) => import("react").JSX.Element;
+    };
     Badge: typeof Badge;
     BadgeVariants: typeof BadgeVariants;
     Accordion: (({ children, className }: {
@@ -61,6 +67,7 @@ export declare const Display: {
     Chip: typeof Chip;
     Tag: typeof Tag;
     Image: typeof DisplayImage;
+    ExpoImage: typeof ExpoImage;
     MediaCard: typeof MediaCard;
     MediaEmbed: typeof MediaEmbed;
     Story: typeof Story;
@@ -97,6 +104,8 @@ export declare const Display: {
     Pattern: typeof Pattern;
 };
 export { type BadgeProps, BadgeVariants };
+export type { AmountSummaryRootProps, AmountSummaryRowProps, AmountSummaryTotalProps, } from "./Display.AmountSummary.js";
+export type { CarouselControlsProps, CarouselProps, } from "./Display.Carousel.js";
 export type { CircleButtonProps } from "./Display.CircleButton.js";
 export type { ListGroupProps } from "./Display.ListGroup.js";
 export type { ListItemProps } from "./Display.ListItem.js";

package/dist/Display/index.js

@@ -1,4 +1,5 @@
 import Accordion from "./Display.Accordion.js";
+import AmountSummary from "./Display.AmountSummary.js";
 import Avatar from "./Display.Avatar.js";
 import AvatarGroup from "./Display.AvatarGroup.js";
 import Badge, { BadgeVariants, } from "./Display.Badge.js";
@@ -11,6 +12,7 @@ import CountRecords from "./Display.CountRecords.js";
 import DataTable from "./Display.DataTable.js";
 import Date from "./Display.Date.js";
 import Divider from "./Display.Divider.js";
+import ExpoImage from "./Display.ExpoImage.js";
 import GradientSurface from "./Display.GradientSurface.js";
 import Icon from "./Display.Icon.js";
 import IconBadge from "./Display.IconBadge.js";
@@ -42,6 +44,7 @@ import Tag from "./Display.Tag.js";
 import Timeline from "./Display.Timeline.js";
 import Tooltip from "./Display.Tooltip.js";
 export const Display = {
+    AmountSummary,
     Badge,
     BadgeVariants,
     Accordion,
@@ -52,6 +55,7 @@ export const Display = {
     Chip,
     Tag,
     Image: DisplayImage,
+    ExpoImage,
     MediaCard,
     MediaEmbed,
     Story,

package/dist/Feedback/Feedback.DomainSplashScreen.d.ts

@@ -1,11 +1,20 @@
-import type React from "react";
-import { ReactNode } from "react";
-interface DomainSplashScreenProps {
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface DomainSplashRenderProps {
+    domainName: string;
+    isLoading: boolean;
+    reducedMotion: boolean;
+}
+export interface DomainSplashScreenProps {
     domainName: string;
     isLoading: boolean;
     children: ReactNode;
     onComplete?: () => void;
     minDuration?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+    overlayStyle?: StyleProp<ViewStyle>;
+    renderLoading?: (props: DomainSplashRenderProps) => ReactNode;
+    testID?: string;
 }
-declare function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDuration, }: DomainSplashScreenProps): React.JSX.Element;
+declare function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDuration, containerStyle, overlayStyle, renderLoading, testID, }: DomainSplashScreenProps): import("react").JSX.Element;
 export default DomainSplashScreen;

package/dist/Feedback/Feedback.DomainSplashScreen.js

@@ -1,65 +1,80 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import Pattern from "../Display/Display.Pattern.js";
-import { theme } from "../theme/index.js";
+import Progress from "./Feedback.Progress.js";
+import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { useCallback, useEffect, useState } from "react";
-import { StyleSheet, View } from "react-native";
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDuration = 300, }) {
-    const progressValue = useSharedValue(0);
-    const opacityValue = useSharedValue(1);
-    const [isComplete, setIsComplete] = useState(false);
-    const handleComplete = useCallback(() => {
-        if (onComplete) {
-            onComplete();
-        }
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { useEffect, useRef, useState } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDuration = 300, containerStyle, overlayStyle, renderLoading, testID, }) {
+    if (!Number.isFinite(minDuration) || minDuration < 0)
+        throw new RangeError("DomainSplashScreen minDuration must be a finite, non-negative number.");
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const [opacity] = useState(() => new Animated.Value(isLoading ? 1 : 0));
+    const [visible, setVisible] = useState(isLoading);
+    const startedAt = useRef(null);
+    const completed = useRef(false);
+    const onCompleteRef = useRef(onComplete);
+    const busy = isLoading || visible;
+    if (isLoading && !visible)
+        setVisible(true);
+    useEffect(() => {
+        onCompleteRef.current = onComplete;
     }, [onComplete]);
     useEffect(() => {
-        if (!isLoading) {
-            progressValue.value = withTiming(100, {
-                duration: 300,
-                easing: Easing.out(Easing.ease),
-            });
-            setTimeout(() => {
-                opacityValue.value = withTiming(0, {
-                    duration: 400,
-                    easing: Easing.out(Easing.ease),
-                });
-            }, 100);
+        if (isLoading) {
+            startedAt.current = Date.now();
+            completed.current = false;
+        }
+    }, [isLoading]);
+    useEffect(() => {
+        if (isLoading) {
+            opacity.stopAnimation();
+            opacity.setValue(1);
             return;
         }
-        const startTime = Date.now();
-        const totalDuration = 2500;
-        const interval = setInterval(() => {
-            const elapsed = Date.now() - startTime;
-            const newProgress = Math.min((elapsed / totalDuration) * 100, 100);
-            progressValue.value = newProgress;
-            if (newProgress >= 100) {
-                clearInterval(interval);
-                setIsComplete(true);
-                setTimeout(() => {
-                    opacityValue.value = withTiming(0, {
-                        duration: 800,
-                        easing: Easing.out(Easing.ease),
-                    }, (finished) => {
-                        if (finished) {
-                            scheduleOnRN(handleComplete);
-                        }
-                    });
-                }, 500);
+        if (startedAt.current === null || completed.current)
+            return;
+        let active = true;
+        let animation;
+        const finish = () => {
+            if (!active || completed.current)
+                return;
+            completed.current = true;
+            setVisible(false);
+            onCompleteRef.current?.();
+        };
+        const timeout = setTimeout(() => {
+            if (reducedMotion) {
+                opacity.setValue(0);
+                finish();
             }
-        }, 50);
-        return () => clearInterval(interval);
-    }, [isLoading]);
-    const progressBarStyle = useAnimatedStyle(() => ({
-        width: `${progressValue.value}%`,
-    }));
-    const splashStyle = useAnimatedStyle(() => ({
-        opacity: opacityValue.value,
-    }));
-    return (_jsxs(View, { style: styles.container, children: [children, _jsx(Animated.View, { pointerEvents: isLoading ? "auto" : "none", style: [StyleSheet.absoluteFill, splashStyle], children: _jsxs(GradientSurface, { preset: "warm", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.14, size: 26 }), _jsx(View, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-5", children: [_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 24, letterSpacing: 0.5 }, children: isComplete ? "¡Listo!" : `Cargando ${domainName}` }), !isComplete && (_jsx(View, { className: "w-full rounded-full h-1.5 overflow-hidden", style: { backgroundColor: "rgba(255,255,255,0.18)" }, children: _jsx(Animated.View, { className: "rounded-full h-1.5", style: [{ backgroundColor: theme.primary }, progressBarStyle] }) })), isComplete && (_jsxs(Typography.Text, { style: { color: "rgba(255,255,255,0.8)", fontSize: 13 }, children: ["Ya puedes comenzar a usar ", domainName, "."] }))] }) })] }) })] }));
+            else {
+                animation = Animated.timing(opacity, {
+                    toValue: 0,
+                    duration: 400,
+                    useNativeDriver: true,
+                    isInteraction: false,
+                });
+                animation.start(({ finished }) => {
+                    if (finished)
+                        finish();
+                });
+            }
+        }, Math.max(0, minDuration - (Date.now() - startedAt.current)));
+        return () => {
+            active = false;
+            clearTimeout(timeout);
+            animation?.stop();
+        };
+    }, [isLoading, minDuration, opacity, reducedMotion]);
+    return (_jsxs(View, { style: [styles.container, containerStyle], testID: testID, children: [_jsx(View, { accessibilityElementsHidden: busy, importantForAccessibility: busy ? "no-hide-descendants" : "auto", pointerEvents: busy ? "none" : "auto", style: styles.container, testID: testID ? `${testID}-content` : undefined, children: children }), busy ? (_jsx(Animated.View, { style: [
+                    StyleSheet.absoluteFill,
+                    { opacity: isLoading ? 1 : opacity },
+                    overlayStyle,
+                ], testID: testID ? `${testID}-loading` : undefined, children: renderLoading ? (renderLoading({ domainName, isLoading, reducedMotion })) : (_jsxs(GradientSurface, { className: "flex-1", preset: "warm", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.14, size: 26 }), _jsx(View, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-5", children: [_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 24, letterSpacing: 0.5 }, children: `Cargando ${domainName}` }), _jsx(Progress, { accessibilityLabel: `Cargando ${domainName}`, indeterminate: true, indicatorStyle: { backgroundColor: theme.primary }, style: { backgroundColor: "rgba(255,255,255,0.18)" } })] }) })] })) })) : null] }));
 }
 const styles = StyleSheet.create({
     container: {

package/dist/Feedback/Feedback.EmptyState.d.ts

@@ -1,16 +1,15 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface EmptyStateProps {
     title: string;
     description?: string;
     icon?: string;
-    image?: ImageSourcePropType;
+    image?: ImageSource;
     actionLabel?: string;
     onAction?: () => void;
     children?: ReactNode;
     className?: string;
     testID?: string;
-    accessibleSizing?: boolean;
 }
-declare function EmptyState({ title, description, icon, image, actionLabel, onAction, children, className, testID, accessibleSizing, }: EmptyStateProps): import("react").JSX.Element;
+declare function EmptyState({ title, description, icon, image, actionLabel, onAction, children, className, testID, }: EmptyStateProps): import("react").JSX.Element;
 export default EmptyState;