@sincpro/mobile-ui 1.0.1 → 2.0.0

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/Display.SwipeableRow.d.ts

@@ -7,9 +7,11 @@ export interface SwipeRowAction {
 }
 export interface SwipeableRowProps {
     children: ReactNode;
+    /** Visible alternative for essential swipe actions. */
+    visibleActions?: ReactNode;
     rightActions?: SwipeRowAction[];
     leftActions?: SwipeRowAction[];
     testID?: string;
 }
-declare function SwipeableRow({ children, rightActions, leftActions, testID }: SwipeableRowProps): import("react").JSX.Element;
+declare function SwipeableRow({ children, visibleActions, rightActions, leftActions, testID, }: SwipeableRowProps): import("react").JSX.Element;
 export default SwipeableRow;

package/dist/Display/Display.SwipeableRow.js

@@ -17,13 +17,13 @@ function ActionButtons({ actions, onDone, }) {
                 paddingHorizontal: 20,
             }, children: [action.icon ? (_jsx(Icon, { color: theme.text.inverse, name: action.icon, size: 20 })) : null, action.label ? (_jsx(Typography.Text, { className: "text-text-inverse text-xs mt-1", children: action.label })) : null] }, index))) }));
 }
-function SwipeableRow({ children, rightActions, leftActions, testID }) {
+function SwipeableRow({ children, visibleActions, rightActions, leftActions, testID, }) {
     const ref = useRef(null);
     const close = () => ref.current?.close();
-    return (_jsx(Swipeable, { ref: ref, renderLeftActions: leftActions?.length
+    return (_jsxs(Swipeable, { ref: ref, renderLeftActions: leftActions?.length
             ? () => _jsx(ActionButtons, { actions: leftActions, onDone: close })
             : undefined, renderRightActions: rightActions?.length
             ? () => _jsx(ActionButtons, { actions: rightActions, onDone: close })
-            : undefined, testID: testID, children: children }));
+            : undefined, testID: testID, children: [children, visibleActions ? _jsx(View, { className: "flex-row", children: visibleActions }) : null] }));
 }
 export default SwipeableRow;

package/dist/Display/index.d.ts

@@ -8,10 +8,12 @@ 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";
 import KeyValue from "./Display.KeyValue.js";
+import ListGroup from "./Display.ListGroup.js";
 import ListItem from "./Display.ListItem.js";
 import MediaCard from "./Display.MediaCard.js";
 import MediaEmbed from "./Display.MediaEmbed.js";
@@ -36,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 }: {
@@ -60,12 +67,14 @@ 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;
     StoryTray: typeof StoryTray;
     StoryViewer: typeof StoryViewer;
     ListItem: typeof ListItem;
+    ListGroup: typeof ListGroup;
     KeyValue: typeof KeyValue;
     DataTable: typeof DataTable;
     Stat: typeof Stat;
@@ -95,7 +104,11 @@ 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";
 export type { MenuCardProps } from "./Display.MenuCard.js";
 export type { MenuGridItem } from "./Display.MenuGrid.js";
 export default Display;

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,11 +12,13 @@ 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";
 import DisplayImage from "./Display.Image.js";
 import KeyValue from "./Display.KeyValue.js";
+import ListGroup from "./Display.ListGroup.js";
 import ListItem from "./Display.ListItem.js";
 import Logo from "./Display.Logo.js";
 import MediaCard from "./Display.MediaCard.js";
@@ -41,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,
@@ -51,12 +55,14 @@ export const Display = {
     Chip,
     Tag,
     Image: DisplayImage,
+    ExpoImage,
     MediaCard,
     MediaEmbed,
     Story,
     StoryTray,
     StoryViewer,
     ListItem,
+    ListGroup,
     KeyValue,
     DataTable,
     Stat,

package/dist/Feedback/Feedback.Banner.js

@@ -30,6 +30,6 @@ const iconByTone = {
 function Banner({ message, title, tone = "info", onClose, action, className, testID, }) {
     const styles = banner({ tone });
     const icon = iconByTone[tone ?? "info"];
-    return (_jsxs(View, { className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: icon.color, name: icon.name, size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
+    return (_jsxs(View, { accessibilityLiveRegion: tone === "danger" ? "assertive" : "polite", accessibilityRole: tone === "danger" ? "alert" : undefined, className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: icon.color, name: icon.name, size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
 }
 export default Banner;

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,10 +1,10 @@
+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;

package/dist/Feedback/Feedback.EmptyState.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "../Display/Display.ExpoImage.js";
 import Icon from "../Display/Display.Icon.js";
 import { BaseButton } from "../primitives/BaseButton.js";
 import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 function EmptyState({ title, description, icon = "file-tray-outline", image, actionLabel, onAction, children, className, testID, }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-8 gap-3", className), testID: testID, children: [image ? (_jsx(Image, { resizeMode: "contain", source: image, style: { width: 140, height: 140 } })) : (_jsx(View, { className: "w-20 h-20 rounded-full bg-bg-muted items-center justify-center", children: _jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 40 }) })), _jsx(Typography.Text, { align: "center", className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), description ? (_jsx(Typography.Text, { align: "center", className: "text-text-secondary", variant: "body", children: description })) : null, actionLabel && onAction ? (_jsx(View, { className: "mt-2", children: _jsx(BaseButton, { onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-8 gap-3", className), testID: testID, children: [image ? (_jsx(ExpoImage, { contentFit: "contain", source: image, style: { width: 140, height: 140 } })) : (_jsx(View, { className: "w-20 h-20 rounded-full bg-bg-muted items-center justify-center", children: _jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 40 }) })), _jsx(Typography.Text, { accessibilityRole: "header", align: "center", className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), description ? (_jsx(Typography.Text, { align: "center", className: "text-text-secondary", variant: "body", children: description })) : null, actionLabel && onAction ? (_jsx(View, { className: "mt-2", children: _jsx(BaseButton, { onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
 }
 export default EmptyState;

package/dist/Feedback/Feedback.Error.d.ts

@@ -4,6 +4,7 @@ interface ErrorProps {
     onBack?: () => void;
     onHome?: () => void;
     className?: string;
+    testID?: string;
 }
-declare function Error({ message, onRetry, onBack, onHome, className }: ErrorProps): import("react").JSX.Element;
+declare function Error({ message, onRetry, onBack, onHome, className, testID }: ErrorProps): import("react").JSX.Element;
 export default Error;

package/dist/Feedback/Feedback.Error.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
-import Button from "../Form/Form.Button.js";
+import Button from "../primitives/BaseButton.js";
+import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Error({ message, onRetry, onBack, onHome, className }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { color: "#ef4444", name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && _jsx(Button, { className: "w-full", onPress: onRetry, title: "Reintentar" }), onBack && (_jsx(Button, { className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
+function Error({ message, onRetry, onBack, onHome, className, testID }) {
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), testID: testID, children: [_jsx(Icon, { color: theme.danger, name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { accessibilityRole: "header", className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && _jsx(Button, { className: "w-full", onPress: onRetry, title: "Reintentar" }), onBack && (_jsx(Button, { className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
 }
 export default Error;

package/dist/Feedback/Feedback.Loading.d.ts

@@ -1,11 +1,15 @@
 import { type SpinnerVariant } from "./Feedback.Spinner.js";
 import type React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 interface LoadingStateProps {
     message?: string;
     size?: "small" | "large";
     variant?: SpinnerVariant;
-    style?: object;
+    style?: StyleProp<ViewStyle>;
     className?: string;
+    animated?: boolean;
+    accessibilityLabel?: string;
+    testID?: string;
 }
-declare function LoadingState({ message, size, variant, style, className, }: LoadingStateProps): React.JSX.Element;
+declare function LoadingState({ message, size, variant, style, className, animated, accessibilityLabel, testID, }: LoadingStateProps): React.JSX.Element;
 export default LoadingState;

package/dist/Feedback/Feedback.Loading.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import Spinner from "./Feedback.Spinner.js";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
-function LoadingState({ message = "Cargando…", size = "small", variant = "spinner", style = {}, className, }) {
-    return (_jsx(View, { className: cn("flex-1 justify-center items-center", className), style: style, children: _jsx(Spinner, { className: "mb-5", size: size, text: message, variant: variant }) }));
+function LoadingState({ message = "Cargando…", size = "small", variant = "spinner", style = {}, className, animated, accessibilityLabel, testID, }) {
+    return (_jsx(View, { className: cn("flex-1 justify-center items-center", className), style: style, children: _jsx(Spinner, { accessibilityLabel: accessibilityLabel, animated: animated, className: "mb-5", size: size, testID: testID, text: message, variant: variant }) }));
 }
 export default LoadingState;

package/dist/Feedback/Feedback.Progress.d.ts

@@ -1,9 +1,12 @@
-export interface ProgressProps {
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+export interface ProgressProps extends Omit<ViewProps, "children" | "accessibilityValue" | "accessibilityRole" | "accessibilityState"> {
     value?: number;
     indeterminate?: boolean;
     height?: number;
     className?: string;
-    testID?: string;
+    animated?: boolean;
+    indicatorClassName?: string;
+    indicatorStyle?: StyleProp<ViewStyle>;
 }
-declare function Progress({ value, indeterminate, height, className, testID, }: ProgressProps): import("react").JSX.Element;
+declare function Progress({ value, indeterminate, height, className, animated, indicatorClassName, indicatorStyle, style, ...props }: ProgressProps): import("react").JSX.Element;
 export default Progress;

package/dist/Feedback/Feedback.Progress.js

@@ -1,37 +1,47 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
 import { motion } from "../tokens/motion.js";
+import { normalizeProgress } from "../utils/progress.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useEffect, useRef } from "react";
-import { Animated, Easing, View } from "react-native";
-function clamp(n) {
-    return Math.max(0, Math.min(1, n));
-}
-function Progress({ value = 0, indeterminate = false, height = 6, className, testID, }) {
+import { Animated, Easing, View, } from "react-native";
+function Progress({ value = 0, indeterminate = false, height = 6, className, animated = true, indicatorClassName, indicatorStyle, style, ...props }) {
+    const reducedMotion = useReducedMotion();
+    const shouldAnimate = indeterminate && animated && !reducedMotion;
+    const progress = indeterminate ? 0 : normalizeProgress(value);
     // eslint-disable-next-line react-hooks/refs
     const translate = useRef(new Animated.Value(0)).current;
     useEffect(() => {
-        if (!indeterminate)
+        translate.setValue(0);
+        if (!shouldAnimate)
             return;
         const loop = Animated.loop(Animated.timing(translate, {
             toValue: 1,
             duration: motion.duration.slower,
             easing: Easing.inOut(Easing.ease),
             useNativeDriver: true,
+            isInteraction: false,
         }));
         loop.start();
         return () => loop.stop();
-    }, [indeterminate, translate]);
-    return (_jsx(View, { accessibilityRole: "progressbar", accessibilityValue: indeterminate ? undefined : { now: Math.round(clamp(value) * 100), min: 0, max: 100 }, className: cn("w-full overflow-hidden rounded-full bg-bg-muted", className), style: { height }, testID: testID, children: indeterminate ? (_jsx(Animated.View, { className: "h-full rounded-full bg-primary", style: {
-                width: "40%",
-                transform: [
-                    {
-                        // eslint-disable-next-line react-hooks/refs
-                        translateX: translate.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: ["-40%", "250%"],
-                        }),
-                    },
-                ],
-            } })) : (_jsx(View, { className: "h-full rounded-full bg-primary", style: { width: `${clamp(value) * 100}%` } })) }));
+    }, [shouldAnimate, translate]);
+    return (_jsx(View, { ...props, accessibilityRole: "progressbar", accessibilityState: { busy: indeterminate }, accessibilityValue: indeterminate ? undefined : { now: Math.round(progress * 100), min: 0, max: 100 }, accessible: true, className: cn("w-full overflow-hidden rounded-full bg-bg-muted", className), style: [{ height }, style], children: indeterminate ? (_jsx(Animated.View, { className: cn("h-full rounded-full bg-primary", indicatorClassName), style: [
+                {
+                    width: "40%",
+                    marginLeft: shouldAnimate ? 0 : "30%",
+                    transform: shouldAnimate
+                        ? [
+                            {
+                                // eslint-disable-next-line react-hooks/refs
+                                translateX: translate.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: ["-40%", "250%"],
+                                }),
+                            },
+                        ]
+                        : [],
+                },
+                indicatorStyle,
+            ] })) : (_jsx(View, { className: cn("h-full rounded-full bg-primary", indicatorClassName), style: [{ width: `${progress * 100}%` }, indicatorStyle] })) }));
 }
 export default Progress;

package/dist/Feedback/Feedback.ProgressCircle.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-export interface ProgressCircleProps {
+import { type ViewProps } from "react-native";
+export interface ProgressCircleProps extends Omit<ViewProps, "accessibilityValue" | "accessibilityRole"> {
     value?: number;
     size?: number;
     strokeWidth?: number;
@@ -8,5 +9,5 @@ export interface ProgressCircleProps {
     children?: ReactNode;
     testID?: string;
 }
-declare function ProgressCircle({ value, size, strokeWidth, color, trackColor, children, testID, }: ProgressCircleProps): import("react").JSX.Element;
+declare function ProgressCircle({ value, size, strokeWidth, color, trackColor, children, style, ...props }: ProgressCircleProps): import("react").JSX.Element;
 export default ProgressCircle;

package/dist/Feedback/Feedback.ProgressCircle.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
+import { normalizeProgress } from "../utils/progress.js";
 import { View } from "react-native";
 import Svg, { Circle } from "react-native-svg";
-function clamp(n) {
-    return Math.max(0, Math.min(1, n));
-}
-function ProgressCircle({ value = 0, size = 64, strokeWidth = 6, color, trackColor, children, testID, }) {
+function ProgressCircle({ value = 0, size = 64, strokeWidth = 6, color, trackColor, children, style, ...props }) {
+    const theme = useTheme();
+    const progress = normalizeProgress(value);
     const radius = (size - strokeWidth) / 2;
     const circumference = 2 * Math.PI * radius;
-    const offset = circumference * (1 - clamp(value));
+    const offset = circumference * (1 - progress);
     const center = size / 2;
-    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityValue: { now: Math.round(clamp(value) * 100), min: 0, max: 100 }, style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, testID: testID, children: [_jsxs(Svg, { height: size, style: { position: "absolute" }, width: size, children: [_jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: trackColor ?? theme.bg.muted, strokeWidth: strokeWidth }), _jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: color ?? theme.primary, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: offset, strokeLinecap: "round", strokeWidth: strokeWidth, transform: `rotate(-90 ${center} ${center})` })] }), children] }));
+    return (_jsxs(View, { ...props, accessibilityRole: "progressbar", accessibilityValue: { now: Math.round(progress * 100), min: 0, max: 100 }, accessible: true, style: [
+            { width: size, height: size, alignItems: "center", justifyContent: "center" },
+            style,
+        ], children: [_jsxs(Svg, { height: size, style: { position: "absolute" }, width: size, children: [_jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: trackColor ?? theme.bg.muted, strokeWidth: strokeWidth }), _jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: color ?? theme.primary, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: offset, strokeLinecap: "round", strokeWidth: strokeWidth, transform: `rotate(-90 ${center} ${center})` })] }), children] }));
 }
 export default ProgressCircle;

package/dist/Feedback/Feedback.Skeleton.d.ts

@@ -1,11 +1,11 @@
-import { type DimensionValue, type ViewStyle } from "react-native";
-export interface SkeletonProps {
+import { type DimensionValue, type ViewProps } from "react-native";
+export interface SkeletonProps extends Omit<ViewProps, "children"> {
     width?: DimensionValue;
     height?: DimensionValue;
     radius?: number;
     circle?: boolean;
     className?: string;
-    style?: ViewStyle;
+    animated?: boolean;
 }
-declare function Skeleton({ width, height, radius, circle, className, style, }: SkeletonProps): import("react").JSX.Element;
+declare function Skeleton({ width, height, radius, circle, className, style, animated, ...props }: SkeletonProps): import("react").JSX.Element;
 export default Skeleton;