@sincpro/mobile-ui 1.1.0 → 2.0.0

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);

package/dist/Feedback/Toast.context.d.ts

@@ -1,22 +1,83 @@
+import { type PressableProps } from "../primitives/Pressable.js";
 import { type ReactNode } from "react";
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
 export type ToastVariant = "info" | "success" | "warning" | "danger" | "loading";
 export interface ToastAction {
     label: string;
     onPress: () => void;
 }
+export interface ToastRenderProps {
+    id: string;
+    dismiss: () => void;
+    update: (options: Partial<ToastOptions>) => void;
+}
 export interface ToastOptions {
     message: string;
     title?: string;
     variant?: ToastVariant;
     duration?: number;
     action?: ToastAction;
+    className?: string;
+    render?: (controls: ToastRenderProps) => ReactNode;
     /** Stable id: calling show()/info()/… again with the same id updates the existing toast
      *  (and resets its timer) instead of stacking a duplicate. */
     id?: string;
-    /** Render a close (✕) button. Defaults to true for persistent toasts (duration 0 / loading),
-     *  false for auto-dismissing ones. */
+    /** Render a close (✕) button. Defaults to true, including auto-dismissing toasts. */
     dismissible?: boolean;
 }
+export type ToastCustomOptions = Omit<ToastOptions, "message" | "render"> & {
+    message?: string;
+    render: (controls: ToastRenderProps) => ReactNode;
+};
+export interface ToastRootProps extends Omit<ViewProps, "children"> {
+    children: ReactNode;
+    accessibilityHint?: string;
+    className?: string;
+    position?: "top" | "bottom";
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare function ToastRoot({ children, accessibilityHint, className, position, style, testID, ...viewProps }: ToastRootProps): import("react").JSX.Element;
+export interface ToastIconProps {
+    variant?: ToastVariant;
+    icon?: ReactNode;
+    color?: string;
+    size?: number;
+}
+declare function ToastIcon({ variant, icon, color, size }: ToastIconProps): import("react").JSX.Element;
+export interface ToastContentProps {
+    children: ReactNode;
+    className?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ToastContent({ children, className, style }: ToastContentProps): import("react").JSX.Element;
+export interface ToastTextProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function ToastTitle({ children, className }: ToastTextProps): import("react").JSX.Element;
+declare function ToastDescription({ children, className }: ToastTextProps): import("react").JSX.Element;
+export interface ToastActionProps extends Omit<PressableProps, "children" | "onPress"> {
+    label: string;
+    onPress: () => void;
+    className?: string;
+}
+declare function ToastActionButton({ label, onPress, className, style, ...props }: ToastActionProps): import("react").JSX.Element;
+export interface ToastCloseProps extends Omit<PressableProps, "children" | "onPress"> {
+    onPress: () => void;
+    accessibilityLabel?: string;
+    className?: string;
+}
+declare function ToastClose({ onPress, accessibilityLabel, className, style, ...props }: ToastCloseProps): import("react").JSX.Element;
+export declare const Toast: {
+    Root: typeof ToastRoot;
+    Icon: typeof ToastIcon;
+    Content: typeof ToastContent;
+    Title: typeof ToastTitle;
+    Description: typeof ToastDescription;
+    Action: typeof ToastActionButton;
+    Close: typeof ToastClose;
+};
 type MessageOrFn<T> = string | ((value: T) => string);
 export interface ToastPromiseMessages<T> {
     loading: string;
@@ -24,7 +85,7 @@ export interface ToastPromiseMessages<T> {
     error: MessageOrFn<unknown>;
 }
 export interface ToastContextValue {
-    show: (options: ToastOptions) => string;
+    show: (options: ToastOptions | ToastCustomOptions) => string;
     update: (id: string, options: Partial<ToastOptions>) => void;
     hide: (id: string) => void;
     info: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;