@sincpro/mobile-ui 1.1.0 → 2.0.1

package/dist/Display/Display.Carousel.js

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

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

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

package/dist/Display/Display.ExpoImage.js

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

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;