@sincpro/mobile-ui 1.0.1 → 2.0.0

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;

package/dist/Feedback/Toast.context.js

@@ -1,13 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
+import Spinner from "./Feedback.Spinner.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
-import { tv } from "../theme/tw.js";
+import { useTheme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { View } from "react-native";
+import { GestureDetector, usePanGesture } from "react-native-gesture-handler";
 import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+function ToastRoot({ children, accessibilityHint = "Usa Cerrar o desliza hacia arriba o abajo para cerrar", className, position = "top", style, testID, ...viewProps }) {
+    const reducedMotion = useReducedMotion();
+    const styles = toast();
+    const entering = position === "top" ? FadeInDown : FadeInUp;
+    const exiting = position === "top" ? FadeOutUp : FadeOutDown;
+    return (_jsx(Animated.View, { ...viewProps, accessibilityHint: accessibilityHint, accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: styles.root({ className }), entering: reducedMotion ? undefined : entering.duration(220), exiting: reducedMotion ? undefined : exiting.duration(180), style: style, testID: testID, children: children }));
+}
+function ToastIcon({ variant = "info", icon, color, size = 22 }) {
+    const theme = useTheme();
+    if (icon)
+        return _jsx(_Fragment, { children: icon });
+    if (variant === "loading") {
+        return (_jsx(Spinner, { accessibilityLabel: "Cargando", color: color ?? theme.text.accent, size: "small" }));
+    }
+    const colors = {
+        info: theme.info,
+        success: theme.success,
+        warning: theme.warning,
+        danger: theme.danger,
+    };
+    return _jsx(Icon, { color: color ?? colors[variant], name: iconByVariant[variant], size: size });
+}
+function ToastContent({ children, className, style }) {
+    return (_jsx(View, { className: cn("flex-1", className), style: style, children: children }));
+}
+function ToastTitle({ children, className }) {
+    return (_jsx(Typography.Text, { className: cn("text-sm font-semibold text-text-primary", className), children: children }));
+}
+function ToastDescription({ children, className }) {
+    return (_jsx(Typography.Text, { className: cn("text-sm text-text-secondary", className), children: children }));
+}
+function ToastActionButton({ label, onPress, className, style, ...props }) {
+    return (_jsx(Pressable, { ...props, accessibilityLabel: label, accessibilityRole: "button", className: cn("min-h-12 justify-center px-2", className), onPress: onPress, style: [{ minHeight: 48, minWidth: 48 }, style], children: _jsx(Typography.Text, { className: "text-sm font-semibold text-text-accent", children: label }) }));
+}
+function ToastClose({ onPress, accessibilityLabel = "Cerrar", className, style, ...props }) {
+    const theme = useTheme();
+    return (_jsx(Pressable, { ...props, accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: cn("min-h-12 min-w-12 items-center justify-center", className), hitSlop: 8, onPress: onPress, style: [{ minHeight: 48, minWidth: 48 }, style], children: _jsx(Icon, { color: theme.text.tertiary, name: "close", size: 18 }) }));
+}
+export const Toast = {
+    Root: ToastRoot,
+    Icon: ToastIcon,
+    Content: ToastContent,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Action: ToastActionButton,
+    Close: ToastClose,
+};
 const ToastContext = createContext(null);
 const DEFAULT_DURATION = 3500;
 // iOS-style card: rounded, hairline border + soft shadow, neutral surface. The variant is
@@ -20,39 +70,54 @@ const toast = tv({
     },
 });
 const iconByVariant = {
-    info: { name: "information-circle", color: theme.info },
-    success: { name: "checkmark-circle", color: theme.success },
-    warning: { name: "warning", color: theme.warning },
-    danger: { name: "close-circle", color: theme.danger },
+    info: "information-circle",
+    success: "checkmark-circle",
+    warning: "warning",
+    danger: "close-circle",
 };
-function ToastItem({ entry, onHide, position, }) {
+function ToastItem({ entry, onHide, onUpdate, position, }) {
     const variant = entry.variant ?? "info";
-    const styles = toast();
-    const entering = position === "top" ? FadeInDown : FadeInUp;
-    const exiting = position === "top" ? FadeOutUp : FadeOutDown;
-    const resolvedDuration = entry.duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
-    const showClose = entry.dismissible ?? resolvedDuration === 0;
-    return (_jsxs(Animated.View, { accessibilityLiveRegion: "polite", accessible: true, className: styles.root(), entering: entering.duration(220), exiting: exiting.duration(180), children: [variant === "loading" ? (_jsx(ActivityIndicator, { color: theme.text.accent, size: "small" })) : (_jsx(Icon, { color: iconByVariant[variant].color, name: iconByVariant[variant].name, size: 22 })), _jsxs(View, { className: "flex-1", children: [entry.title ? (_jsx(Typography.Text, { className: styles.title(), children: entry.title })) : null, _jsx(Typography.Text, { className: styles.message(), children: entry.message })] }), entry.action ? (_jsx(Pressable, { accessibilityLabel: entry.action.label, onPress: () => {
-                    entry.action?.onPress();
-                    onHide(entry.id);
-                }, children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", children: entry.action.label }) })) : null, showClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: () => onHide(entry.id), children: _jsx(Icon, { color: theme.text.tertiary, name: "close", size: 18 }) })) : null] }));
+    const showClose = entry.dismissible ?? true;
+    const dismiss = () => onHide(entry.id);
+    const pan = usePanGesture({
+        activeOffsetY: [-12, 12],
+        failOffsetX: [-24, 24],
+        onDeactivate: ({ canceled, translationY, velocityY }) => {
+            if (!canceled && (Math.abs(translationY) >= 48 || Math.abs(velocityY) >= 800)) {
+                dismiss();
+            }
+        },
+    });
+    return (_jsx(GestureDetector, { gesture: pan, children: _jsx(Toast.Root, { className: entry.className, onAccessibilityEscape: dismiss, position: position, children: entry.render ? (entry.render({
+                dismiss,
+                id: entry.id,
+                update: (options) => onUpdate(entry.id, options),
+            })) : (_jsxs(_Fragment, { children: [_jsx(Toast.Icon, { variant: variant }), _jsxs(Toast.Content, { children: [entry.title ? _jsx(Toast.Title, { children: entry.title }) : null, entry.message ? _jsx(Toast.Description, { children: entry.message }) : null] }), entry.action ? (_jsx(Toast.Action, { label: entry.action.label, onPress: () => {
+                            entry.action?.onPress();
+                            dismiss();
+                        } })) : null, showClose ? _jsx(Toast.Close, { onPress: dismiss }) : null] })) }) }));
 }
 export function ToastProvider({ children, position = "bottom", }) {
     const insets = useSafeAreaInsets();
     const [toasts, setToasts] = useState([]);
+    const toastsRef = useRef([]);
     const counter = useRef(0);
     const timers = useRef({});
+    const commitToasts = useCallback((next) => {
+        toastsRef.current = next;
+        setToasts(next);
+    }, []);
     const clearTimer = useCallback((id) => {
         const timer = timers.current[id];
-        if (timer) {
+        if (timer !== undefined) {
             clearTimeout(timer);
             delete timers.current[id];
         }
     }, []);
     const hide = useCallback((id) => {
-        setToasts((prev) => prev.filter((t) => t.id !== id));
+        commitToasts(toastsRef.current.filter((t) => t.id !== id));
         clearTimer(id);
-    }, [clearTimer]);
+    }, [clearTimer, commitToasts]);
     const scheduleDismiss = useCallback((id, variant, duration) => {
         clearTimer(id);
         const resolved = duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
@@ -67,16 +132,32 @@ export function ToastProvider({ children, position = "bottom", }) {
             id = `toast-${counter.current}`;
         }
         const toastId = id;
-        setToasts((prev) => prev.some((t) => t.id === toastId)
-            ? prev.map((t) => (t.id === toastId ? { ...t, ...options, id: toastId } : t))
-            : [...prev, { ...options, id: toastId }]);
-        scheduleDismiss(toastId, options.variant, options.duration);
+        const current = toastsRef.current;
+        const currentEntry = current.find((entry) => entry.id === toastId);
+        const nextEntry = {
+            ...currentEntry,
+            ...options,
+            id: toastId,
+            message: options.message ?? currentEntry?.message ?? "",
+        };
+        commitToasts(currentEntry
+            ? current.map((entry) => (entry.id === toastId ? nextEntry : entry))
+            : [...current, nextEntry]);
+        scheduleDismiss(toastId, nextEntry.variant, nextEntry.duration);
         return toastId;
-    }, [scheduleDismiss]);
+    }, [commitToasts, scheduleDismiss]);
     const update = useCallback((id, options) => {
-        setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, ...options } : t)));
-        scheduleDismiss(id, options.variant, options.duration);
-    }, [scheduleDismiss]);
+        const current = toastsRef.current.find((entry) => entry.id === id);
+        if (!current)
+            return;
+        const updated = { ...current, ...options, id };
+        commitToasts(toastsRef.current.map((entry) => (entry.id === id ? updated : entry)));
+        scheduleDismiss(id, updated.variant, updated.duration);
+    }, [commitToasts, scheduleDismiss]);
+    useEffect(() => () => {
+        Object.values(timers.current).forEach(clearTimeout);
+        timers.current = {};
+    }, []);
     const value = useMemo(() => {
         const promise = (p, messages) => {
             const id = show({ message: messages.loading, variant: "loading", duration: 0 });
@@ -110,7 +191,7 @@ export function ToastProvider({ children, position = "bottom", }) {
             promise,
         };
     }, [show, update, hide]);
-    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(View, { className: "absolute left-0 right-0 px-4 gap-2 z-toast", pointerEvents: "box-none", style: position === "top" ? { top: insets.top + 12 } : { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide, position: position }, entry.id))) })] }));
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(View, { className: "absolute left-0 right-0 px-4 gap-2 z-toast", pointerEvents: "box-none", style: position === "top" ? { top: insets.top + 12 } : { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide, onUpdate: update, position: position }, entry.id))) })] }));
 }
 export function useToast() {
     const ctx = useContext(ToastContext);

package/dist/Feedback/index.d.ts

@@ -9,7 +9,12 @@ import ProgressCircle from "./Feedback.ProgressCircle.js";
 import Skeleton from "./Feedback.Skeleton.js";
 import SplashScreen from "./Feedback.Splash.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";
-export { type ToastAction, type ToastContextValue, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastVariant, useToast, } from "./Toast.context.js";
+export type { ProgressProps } from "./Feedback.Progress.js";
+export type { ProgressCircleProps } from "./Feedback.ProgressCircle.js";
+export type { SkeletonProps } from "./Feedback.Skeleton.js";
+export type { SpinnerProps, SpinnerVariant, } from "./Feedback.Spinner.js";
+export { Toast, type ToastAction, type ToastActionProps, type ToastCloseProps, type ToastContentProps, type ToastContextValue, type ToastCustomOptions, type ToastIconProps, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastRenderProps, type ToastRootProps, type ToastTextProps, type ToastVariant, useToast, } from "./Toast.context.js";
+export { useReducedMotion } from "../utils/useReducedMotion.js";
 export declare const Feedback: {
     Loading: typeof Loading;
     Spinner: import("react").FC<import("./Feedback.Spinner.js").SpinnerProps>;
@@ -22,5 +27,14 @@ export declare const Feedback: {
     EmptyState: typeof EmptyState;
     Error: typeof Error;
     SplashScreen: typeof SplashScreen;
+    Toast: {
+        Root: ({ children, accessibilityHint, className, position, style, testID, ...viewProps }: import("./Toast.context.js").ToastRootProps) => import("react").JSX.Element;
+        Icon: ({ variant, icon, color, size }: import("./Toast.context.js").ToastIconProps) => import("react").JSX.Element;
+        Content: ({ children, className, style }: import("./Toast.context.js").ToastContentProps) => import("react").JSX.Element;
+        Title: ({ children, className }: import("./Toast.context.js").ToastTextProps) => import("react").JSX.Element;
+        Description: ({ children, className }: import("./Toast.context.js").ToastTextProps) => import("react").JSX.Element;
+        Action: ({ label, onPress, className, style, ...props }: import("./Toast.context.js").ToastActionProps) => import("react").JSX.Element;
+        Close: ({ onPress, accessibilityLabel, className, style, ...props }: import("./Toast.context.js").ToastCloseProps) => import("react").JSX.Element;
+    };
 };
 export default Feedback;

package/dist/Feedback/index.js

@@ -9,8 +9,10 @@ import ProgressCircle from "./Feedback.ProgressCircle.js";
 import Skeleton from "./Feedback.Skeleton.js";
 import Spinner from "./Feedback.Spinner.js";
 import SplashScreen from "./Feedback.Splash.js";
+import { Toast } from "./Toast.context.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";
-export { ToastProvider, useToast, } from "./Toast.context.js";
+export { Toast, ToastProvider, useToast, } from "./Toast.context.js";
+export { useReducedMotion } from "../utils/useReducedMotion.js";
 export const Feedback = {
     Loading,
     Spinner,
@@ -23,5 +25,6 @@ export const Feedback = {
     EmptyState,
     Error,
     SplashScreen,
+    Toast,
 };
 export default Feedback;

package/dist/Form/Form.Checkbox.d.ts

@@ -7,7 +7,9 @@ interface RowCheckBoxProps {
     isChecked?: boolean;
     onCheck?: (isChecked: boolean) => void;
     disabled?: boolean;
+    accessibilityLabel?: string;
     className?: string;
+    testID?: string;
 }
-declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react").JSX.Element;
+declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, accessibilityLabel, className, testID, }: RowCheckBoxProps): import("react").JSX.Element;
 export default RowCheckBox;

package/dist/Form/Form.Checkbox.js

@@ -4,7 +4,7 @@ import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Checkbox } from "expo-checkbox";
 import { Pressable, View } from "react-native";
-function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, className, }) {
+function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, accessibilityLabel, className, testID, }) {
     const handlePress = () => {
         if (!disabled) {
             onCheck(!isChecked);
@@ -25,6 +25,6 @@ function RowCheckBox({ mainText, subText, rightText, rightComponent, leftCompone
         }
         return null;
     };
-    return (_jsxs(Pressable, { className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.primary, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? [mainText, subText, rightText].filter(Boolean).join(", "), accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, style: { minHeight: 48, minWidth: 48, paddingVertical: 8 }, testID: testID, children: [_jsx(View, { className: "flex-1 min-w-0", children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center flex-shrink", children: [renderRightComponent(), _jsx(Checkbox, { accessibilityElementsHidden: true, accessible: false, className: "ml-2", color: theme.primary, disabled: disabled, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", value: isChecked })] })] }));
 }
 export default RowCheckBox;

package/dist/Form/Form.DatePicker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-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 { useState } from "react";
@@ -26,6 +26,7 @@ const iconByMode = {
  */
 function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, className, testID, }) {
     const [open, setOpen] = useState(false);
+    const theme = useTheme();
     const fmt = format ?? ((d) => defaultFormat(d, mode));
     const handleValueChange = (_event, date) => {
         if (Platform.OS === "android")
@@ -33,6 +34,6 @@ function DatePicker({ value, onChange, mode = "date", label, placeholder = "Sele
         if (date)
             onChange(date);
     };
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: { text: value ? fmt(value) : placeholder }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[48px]", disabled: disabled, onPress: () => setOpen(true), style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
 }
 export default DatePicker;

package/dist/Form/Form.Dropdown.d.ts

@@ -1,14 +1,26 @@
+import { Typography } from "../Typography/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type TouchableOpacityProps, type ViewProps } from "react-native";
 export interface DropdownOption {
     id: string;
     title: string;
     onPress: () => void;
     disabled?: boolean;
 }
-interface DropdownButtonProps {
+export interface DropdownButtonProps {
     title: string;
-    options: DropdownOption[];
+    options: readonly DropdownOption[];
     variant?: "primary" | "secondary" | "outline";
     size?: "xs" | "small" | "medium" | "large";
+    disabled?: boolean;
+    closeAccessibilityLabel?: string;
+    buttonProps?: Omit<TouchableOpacityProps, "children" | "onPress" | "disabled">;
+    contentProps?: Omit<ViewProps, "children">;
+    optionProps?: Omit<TouchableOpacityProps, "children" | "onPress" | "disabled">;
+    titleTextProps?: ComponentProps<typeof Typography.Text>;
+    optionTextProps?: ComponentProps<typeof Typography.Text>;
+    renderOption?: (option: DropdownOption) => ReactNode;
+    testID?: string;
 }
-declare function DropdownButton({ title, options, variant, size, }: DropdownButtonProps): import("react").JSX.Element;
+declare function DropdownButton({ title, options, variant, size, disabled, closeAccessibilityLabel, buttonProps, contentProps, optionProps, titleTextProps, optionTextProps, renderOption, testID, }: DropdownButtonProps): import("react").JSX.Element;
 export default DropdownButton;