@sincpro/mobile-ui 1.1.0 → 2.0.1

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;

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";
-function EmptyState({ title, description, icon = "file-tray-outline", image, actionLabel, onAction, children, className, testID, accessibleSizing = false, }) {
-    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, { 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, { accessibleSizing: accessibleSizing, onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
+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(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,8 +4,7 @@ interface ErrorProps {
     onBack?: () => void;
     onHome?: () => void;
     className?: string;
-    accessibleSizing?: boolean;
     testID?: string;
 }
-declare function Error({ message, onRetry, onBack, onHome, className, accessibleSizing, testID, }: 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

@@ -5,7 +5,7 @@ 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, accessibleSizing = false, 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, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onRetry, title: "Reintentar" })), onBack && (_jsx(Button, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { accessibleSizing: accessibleSizing, 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;

package/dist/Feedback/Feedback.Skeleton.js

@@ -1,30 +1,42 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
 import { motion } from "../tokens/motion.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useEffect, useRef } from "react";
 import { Animated, Easing } from "react-native";
-function Skeleton({ width = "100%", height = 16, radius = 8, circle = false, className, style, }) {
+function Skeleton({ width = "100%", height = 16, radius = 8, circle = false, className, style, animated = true, ...props }) {
+    const reducedMotion = useReducedMotion();
+    const shouldAnimate = animated && !reducedMotion;
     // eslint-disable-next-line react-hooks/refs
     const opacity = useRef(new Animated.Value(0.5)).current;
     useEffect(() => {
+        opacity.setValue(0.5);
+        if (!shouldAnimate)
+            return;
         const pulse = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {
                 toValue: 1,
                 duration: motion.duration.slow,
                 easing: Easing.inOut(Easing.ease),
                 useNativeDriver: true,
+                isInteraction: false,
             }),
             Animated.timing(opacity, {
                 toValue: 0.5,
                 duration: motion.duration.slow,
                 easing: Easing.inOut(Easing.ease),
                 useNativeDriver: true,
+                isInteraction: false,
             }),
         ]));
         pulse.start();
         return () => pulse.stop();
-    }, [opacity]);
+    }, [opacity, shouldAnimate]);
     const resolvedRadius = circle && typeof height === "number" ? height / 2 : radius;
-    return (_jsx(Animated.View, { accessibilityElementsHidden: true, className: cn("bg-bg-muted", className), importantForAccessibility: "no-hide-descendants", style: [{ width, height, borderRadius: resolvedRadius }, style, { opacity }] }));
+    return (_jsx(Animated.View, { ...props, accessibilityElementsHidden: true, className: cn("bg-bg-muted", className), importantForAccessibility: "no-hide-descendants", style: [
+            { width, height, borderRadius: resolvedRadius },
+            style,
+            { opacity: shouldAnimate ? opacity : 0.5 },
+        ] }));
 }
 export default Skeleton;

package/dist/Feedback/Feedback.Spinner.d.ts

@@ -1,14 +1,14 @@
 import type React from "react";
-import { type ViewStyle } from "react-native";
+import { type ViewProps } from "react-native";
 export type SpinnerVariant = "spinner" | "dots" | "ripple";
-export interface SpinnerProps {
+export interface SpinnerProps extends Omit<ViewProps, "children" | "accessibilityRole" | "accessibilityState"> {
     /** Visual style of the loading indicator. Defaults to `"spinner"`. */
     variant?: SpinnerVariant;
     size?: "small" | "large";
     color?: string;
     text?: string;
-    style?: ViewStyle;
     className?: string;
+    animated?: boolean;
 }
 declare const Spinner: React.FC<SpinnerProps>;
 export default Spinner;

package/dist/Feedback/Feedback.Spinner.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useEffect } from "react";
 import { ActivityIndicator, View } from "react-native";
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming, } from "react-native-reanimated";
-function DotsLoader({ color, size }) {
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming, } from "react-native-reanimated";
+function DotsLoader({ color, size, animated }) {
     const dotSize = size === "large" ? 11 : 8;
     const bounce = size === "large" ? 13 : 9;
     const dot = {
@@ -18,24 +19,42 @@ function DotsLoader({ color, size }) {
     const y2 = useSharedValue(0);
     const y3 = useSharedValue(0);
     useEffect(() => {
+        y1.value = 0;
+        y2.value = 0;
+        y3.value = 0;
+        if (!animated)
+            return;
         const seq = withRepeat(withSequence(withTiming(-bounce, { duration: 280, easing: Easing.out(Easing.quad) }), withTiming(0, { duration: 280, easing: Easing.in(Easing.quad) }), withTiming(0, { duration: 200 })), -1, false);
         y1.value = withDelay(0, seq);
         y2.value = withDelay(160, seq);
         y3.value = withDelay(320, seq);
-    }, []);
+        return () => {
+            cancelAnimation(y1);
+            cancelAnimation(y2);
+            cancelAnimation(y3);
+        };
+    }, [animated, bounce, y1, y2, y3]);
     const s1 = useAnimatedStyle(() => ({ transform: [{ translateY: y1.value }] }));
     const s2 = useAnimatedStyle(() => ({ transform: [{ translateY: y2.value }] }));
     const s3 = useAnimatedStyle(() => ({ transform: [{ translateY: y3.value }] }));
     return (_jsxs(View, { style: { flexDirection: "row", gap: 10, alignItems: "center" }, children: [_jsx(Animated.View, { style: [dot, s1] }), _jsx(Animated.View, { style: [dot, s2] }), _jsx(Animated.View, { style: [dot, s3] })] }));
 }
-function RippleLoader({ color, size }) {
+function RippleLoader({ color, size, animated }) {
     const base = size === "large" ? 48 : 32;
     const scale = useSharedValue(0.2);
     const opacity = useSharedValue(0.85);
     useEffect(() => {
+        scale.value = animated ? 0.2 : 1;
+        opacity.value = 0.85;
+        if (!animated)
+            return;
         scale.value = withRepeat(withTiming(2.6, { duration: 1400, easing: Easing.out(Easing.quad) }), -1, false);
         opacity.value = withRepeat(withTiming(0, { duration: 1400, easing: Easing.in(Easing.quad) }), -1, false);
-    }, []);
+        return () => {
+            cancelAnimation(scale);
+            cancelAnimation(opacity);
+        };
+    }, [animated, scale, opacity]);
     const animStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
         opacity: opacity.value,
@@ -52,8 +71,20 @@ function RippleLoader({ color, size }) {
                 animStyle,
             ] }) }));
 }
-const Spinner = ({ variant = "spinner", size = "large", color = theme.primary, text, style, className, }) => {
-    const indicator = variant === "dots" ? (_jsx(DotsLoader, { color: color, size: size })) : variant === "ripple" ? (_jsx(RippleLoader, { color: color, size: size })) : (_jsx(ActivityIndicator, { color: color, size: size }));
-    return (_jsxs(View, { className: cn("items-center justify-center", className), style: style, children: [indicator, text && (_jsx(Typography.Text, { className: "mt-2.5 text-base", variant: "body", children: text }))] }));
+const Spinner = ({ variant = "spinner", size = "large", color, text, style, className, animated = true, accessibilityLabel = text ?? "Cargando", ...props }) => {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const shouldAnimate = animated && !reducedMotion;
+    const resolvedColor = color ?? theme.primary;
+    const staticSize = size === "large" ? 36 : 20;
+    const indicator = variant === "dots" ? (_jsx(DotsLoader, { animated: shouldAnimate, color: resolvedColor, size: size })) : variant === "ripple" ? (_jsx(RippleLoader, { animated: shouldAnimate, color: resolvedColor, size: size })) : shouldAnimate ? (_jsx(ActivityIndicator, { color: resolvedColor, size: size })) : (_jsx(View, { style: {
+            width: staticSize,
+            height: staticSize,
+            borderRadius: staticSize / 2,
+            borderWidth: 2,
+            borderColor: resolvedColor,
+            borderTopColor: "transparent",
+        } }));
+    return (_jsxs(View, { ...props, accessibilityLabel: accessibilityLabel, accessibilityRole: "progressbar", accessibilityState: { busy: true }, accessible: true, className: cn("items-center justify-center", className), style: style, children: [_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: indicator }), text && (_jsx(Typography.Text, { className: "mt-2.5 text-base", variant: "body", children: text }))] }));
 };
 export default Spinner;

package/dist/Feedback/Feedback.Splash.d.ts

@@ -1,8 +1,8 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 interface SplashScreenProps {
     isReady: boolean;
-    logo?: ImageSourcePropType;
+    logo?: ImageSource;
     minDuration?: number;
     message?: string;
     /** `default` keeps the legacy look; `hero` is the modern dark gradient + dotted texture. */

package/dist/Feedback/Feedback.Splash.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "../Display/Display.ExpoImage.js";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import Pattern from "../Display/Display.Pattern.js";
 import Loading from "./Feedback.Loading.js";
+import Spinner from "./Feedback.Spinner.js";
 import GradientContainer from "../layouts/GradientContainer.js";
 import { theme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Image, View } from "react-native";
+import { View } from "react-native";
 function renderLogo(logo) {
     if (!logo) {
         return null;
     }
-    return _jsx(Image, { className: "w-[250px] h-[200px] mb-12", resizeMode: "contain", source: logo });
+    return (_jsx(ExpoImage, { className: "w-[250px] h-[200px] mb-12", contentFit: "contain", source: logo }));
 }
 function HeroSplash({ logo, message, title, subtitle, }) {
-    return (_jsxs(GradientSurface, { className: "flex-1 items-center justify-center", preset: "warm", radius: "none", children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.16, size: 26 }), _jsxs(View, { className: "items-center", children: [logo ? (_jsx(Image, { className: "w-28 h-28 mb-7", resizeMode: "contain", source: logo, style: { shadowColor: theme.primary, shadowOpacity: 0.7, shadowRadius: 28 } })) : null, title ? (_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 28, letterSpacing: 1 }, children: title })) : null, subtitle ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.6)", fontSize: 13, marginTop: 6 }, children: subtitle })) : null, _jsx(View, { className: "mt-10", children: _jsx(ActivityIndicator, { accessibilityLabel: message, color: theme.primary, size: "small" }) })] })] }));
+    return (_jsxs(GradientSurface, { className: "flex-1 items-center justify-center", preset: "warm", radius: "none", children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.16, size: 26 }), _jsxs(View, { className: "items-center", children: [logo ? (_jsx(ExpoImage, { className: "w-28 h-28 mb-7", contentFit: "contain", source: logo, style: { shadowColor: theme.primary, shadowOpacity: 0.7, shadowRadius: 28 } })) : null, title ? (_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 28, letterSpacing: 1 }, children: title })) : null, subtitle ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.6)", fontSize: 13, marginTop: 6 }, children: subtitle })) : null, _jsx(View, { className: "mt-10", children: _jsx(Spinner, { accessibilityLabel: message, color: theme.primary, size: "small" }) })] })] }));
 }
 function Splash({ isReady, logo, minDuration = 800, message = "Inicializando...", variant = "default", title, subtitle, children, }) {
     const [showContent, setShowContent] = useState(false);