@sincpro/mobile-ui 0.2.1 → 0.3.0

package/dist/Display/index.js

@@ -1,17 +1,71 @@
+import Accordion from "../Display/Display.Accordion";
 import Avatar from "../Display/Display.Avatar";
+import AvatarGroup from "../Display/Display.AvatarGroup";
 import Badge, { BadgeVariants, } from "../Display/Display.Badge";
+import Card from "../Display/Display.Card";
+import Carousel from "../Display/Display.Carousel";
+import Chip from "../Display/Display.Chip";
 import CopyableText from "../Display/Display.CopyableText";
 import CountRecords from "../Display/Display.CountRecords";
+import DataTable from "../Display/Display.DataTable";
 import Date from "../Display/Display.Date";
 import Divider from "../Display/Display.Divider";
 import Icon from "../Display/Display.Icon";
+import IconBadge from "../Display/Display.IconBadge";
+import DisplayImage from "../Display/Display.Image";
+import KeyValue from "../Display/Display.KeyValue";
+import ListItem from "../Display/Display.ListItem";
 import Logo from "../Display/Display.Logo";
+import MediaCard from "../Display/Display.MediaCard";
+import MediaEmbed from "../Display/Display.MediaEmbed";
 import MenuButton from "../Display/Display.MenuButton";
 import Monetary from "../Display/Display.Monetary";
+import PriceTag from "../Display/Display.PriceTag";
+import ProductCard from "../Display/Display.ProductCard";
+import Rating from "../Display/Display.Rating";
+import SearchHistory from "../Display/Display.SearchHistory";
+import SectionHeader from "../Display/Display.SectionHeader";
+import Stat from "../Display/Display.Stat";
+import StatCard from "../Display/Display.StatCard";
+import StatusDot from "../Display/Display.StatusDot";
+import Story from "../Display/Display.Story";
+import StoryTray from "../Display/Display.StoryTray";
+import StoryViewer from "../Display/Display.StoryViewer";
+import SwipeableRow from "../Display/Display.SwipeableRow";
+import Tag from "../Display/Display.Tag";
+import Timeline from "../Display/Display.Timeline";
+import Tooltip from "../Display/Display.Tooltip";
 export const Display = {
     Badge,
     BadgeVariants,
+    Accordion,
     Avatar,
+    AvatarGroup,
+    Card,
+    Carousel,
+    Chip,
+    Tag,
+    Image: DisplayImage,
+    MediaCard,
+    MediaEmbed,
+    Story,
+    StoryTray,
+    StoryViewer,
+    ListItem,
+    KeyValue,
+    DataTable,
+    Stat,
+    StatCard,
+    StatusDot,
+    PriceTag,
+    ProductCard,
+    Timeline,
+    SearchHistory,
+    SectionHeader,
+    Rating,
+    SwipeableRow,
+    Tooltip,
+    IconBadge,
     CopyableText,
     Date,
     Divider,

package/dist/Feedback/ErrorBoundary.d.ts

@@ -13,6 +13,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
     handleRetry: () => void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 }
 export {};

package/dist/Feedback/Feedback.Banner.d.ts

@@ -0,0 +1,82 @@
+import { type VariantProps } from "../theme/tw";
+import type { ReactNode } from "react";
+declare const banner: import("tailwind-variants").TVReturnType<{
+    tone: {
+        info: {
+            root: string;
+            title: string;
+        };
+        success: {
+            root: string;
+            title: string;
+        };
+        warning: {
+            root: string;
+            title: string;
+        };
+        danger: {
+            root: string;
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    message: string;
+}, undefined, {
+    tone: {
+        info: {
+            root: string;
+            title: string;
+        };
+        success: {
+            root: string;
+            title: string;
+        };
+        warning: {
+            root: string;
+            title: string;
+        };
+        danger: {
+            root: string;
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    message: string;
+}, import("tailwind-variants").TVReturnType<{
+    tone: {
+        info: {
+            root: string;
+            title: string;
+        };
+        success: {
+            root: string;
+            title: string;
+        };
+        warning: {
+            root: string;
+            title: string;
+        };
+        danger: {
+            root: string;
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    message: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface BannerProps extends VariantProps<typeof banner> {
+    message: string;
+    title?: string;
+    onClose?: () => void;
+    action?: ReactNode;
+    className?: string;
+    testID?: string;
+}
+declare function Banner({ message, title, tone, onClose, action, className, testID, }: BannerProps): import("react").JSX.Element;
+export default Banner;

package/dist/Feedback/Feedback.Banner.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+const banner = tv({
+    slots: {
+        root: "flex-row items-start gap-3 rounded-lg p-3 border",
+        title: "text-sm font-semibold",
+        message: "text-sm text-text-secondary",
+    },
+    variants: {
+        tone: {
+            info: { root: "bg-info-light border-info/30", title: "text-info" },
+            success: { root: "bg-success-light border-success/30", title: "text-success" },
+            warning: { root: "bg-warning-light border-warning/30", title: "text-warning" },
+            danger: { root: "bg-danger-light border-danger/30", title: "text-danger" },
+        },
+    },
+    defaultVariants: { tone: "info" },
+});
+const iconByTone = {
+    info: { name: "information-circle", color: theme.info },
+    success: { name: "checkmark-circle", color: theme.success },
+    warning: { name: "warning", color: theme.warning },
+    danger: { name: "alert-circle", color: theme.danger },
+};
+function Banner({ message, title, tone = "info", onClose, action, className, testID, }) {
+    const styles = banner({ tone });
+    const icon = iconByTone[tone ?? "info"];
+    return (_jsxs(View, { className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: icon.color, name: icon.name, size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
+}
+export default Banner;

package/dist/Feedback/Feedback.DomainSplashScreen.d.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import { ReactNode } from "react";
 interface DomainSplashScreenProps {
     domainName: string;
@@ -6,5 +7,5 @@ interface DomainSplashScreenProps {
     onComplete?: () => void;
     minDuration?: number;
 }
-declare function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDuration, }: DomainSplashScreenProps): import("react/jsx-runtime").JSX.Element;
+declare function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDuration, }: DomainSplashScreenProps): React.JSX.Element;
 export default DomainSplashScreen;

package/dist/Feedback/Feedback.DomainSplashScreen.js

@@ -57,7 +57,7 @@ function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDu
     const splashStyle = useAnimatedStyle(() => ({
         opacity: opacityValue.value,
     }));
-    return (_jsxs(View, { style: styles.container, children: [children, _jsx(Animated.View, { pointerEvents: isLoading ? "auto" : "none", style: [StyleSheet.absoluteFillObject, splashStyle], children: _jsx(GradientContainer, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-6", children: [_jsx(Typography.Text, { className: "text-2xl font-bold text-white", children: isComplete ? "¡Listo!" : `Cargando ${domainName}` }), !isComplete && (_jsx(View, { className: "w-full bg-transparent border border-white/30 rounded-full h-4 overflow-hidden", children: _jsx(Animated.View, { className: "bg-white rounded-full h-4 shadow-lg", style: progressBarStyle }) })), isComplete && (_jsxs(Typography.Text, { className: "text-sm text-white/80", children: ["Ya puedes comenzar a usar ", domainName, "."] }))] }) }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [children, _jsx(Animated.View, { pointerEvents: isLoading ? "auto" : "none", style: [StyleSheet.absoluteFill, splashStyle], children: _jsx(GradientContainer, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-6", children: [_jsx(Typography.Text, { className: "text-2xl font-bold text-white", children: isComplete ? "¡Listo!" : `Cargando ${domainName}` }), !isComplete && (_jsx(View, { className: "w-full bg-transparent border border-white/30 rounded-full h-4 overflow-hidden", children: _jsx(Animated.View, { className: "bg-white rounded-full h-4 shadow-lg", style: progressBarStyle }) })), isComplete && (_jsxs(Typography.Text, { className: "text-sm text-white/80", children: ["Ya puedes comenzar a usar ", domainName, "."] }))] }) }) })] }));
 }
 const styles = StyleSheet.create({
     container: {

package/dist/Feedback/Feedback.Empty.d.ts

@@ -2,5 +2,5 @@ interface EmptyProps {
     handleGoHome?: () => void;
     className?: string;
 }
-declare function Empty({ handleGoHome, className }: EmptyProps): import("react/jsx-runtime").JSX.Element;
+declare function Empty({ handleGoHome, className }: EmptyProps): import("react").JSX.Element;
 export default Empty;

package/dist/Feedback/Feedback.EmptyState.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
+export interface EmptyStateProps {
+    title: string;
+    description?: string;
+    icon?: string;
+    image?: ImageSourcePropType;
+    actionLabel?: string;
+    onAction?: () => void;
+    children?: ReactNode;
+    className?: string;
+    testID?: string;
+}
+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

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

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

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

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

@@ -1,8 +1,9 @@
+import type React from "react";
 interface LoadingStateProps {
     message?: string;
     size?: "small" | "large";
     style?: object;
     className?: string;
 }
-declare function LoadingState({ message, size, style, className, }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
+declare function LoadingState({ message, size, style, className, }: LoadingStateProps): React.JSX.Element;
 export default LoadingState;

package/dist/Feedback/Feedback.PermissionCard.d.ts

@@ -0,0 +1,15 @@
+export interface PermissionCardProps {
+    title: string;
+    description?: string;
+    granted?: boolean;
+    icon?: string;
+    grantedLabel?: string;
+    deniedLabel?: string;
+    actionLabel?: string;
+    loading?: boolean;
+    onRequest?: () => void;
+    className?: string;
+    testID?: string;
+}
+declare function PermissionCard({ title, description, granted, icon, grantedLabel, deniedLabel, actionLabel, loading, onRequest, className, testID, }: PermissionCardProps): import("react").JSX.Element;
+export default PermissionCard;

package/dist/Feedback/Feedback.PermissionCard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { BaseButton } from "../primitives/BaseButton";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function PermissionCard({ title, description, granted = false, icon = "lock-closed", grantedLabel = "Permiso activo", deniedLabel = "Permiso inactivo", actionLabel = "Permitir", loading = false, onRequest, className, testID, }) {
+    return (_jsx(View, { className: cn("bg-bg-card rounded-xl p-4 border border-border-light", className), style: theme.shadow.sm, testID: testID, children: _jsxs(View, { className: "flex-row items-start gap-3", children: [_jsx(Icon, { color: granted ? theme.success : theme.danger, name: granted ? "checkmark-circle" : icon, size: 32 }), _jsxs(View, { className: "flex-1 gap-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "body", children: title }), description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: description })) : null, _jsx(Typography.Text, { style: { color: granted ? theme.success : theme.danger }, variant: "bodySmall", children: granted ? grantedLabel : deniedLabel }), !granted && onRequest ? (_jsx(View, { className: "mt-2 self-start", children: _jsx(BaseButton, { loading: loading, onPress: onRequest, size: "small", title: actionLabel }) })) : null] })] }) }));
+}
+export default PermissionCard;

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

@@ -0,0 +1,9 @@
+export interface ProgressProps {
+    value?: number;
+    indeterminate?: boolean;
+    height?: number;
+    className?: string;
+    testID?: string;
+}
+declare function Progress({ value, indeterminate, height, className, testID, }: ProgressProps): import("react").JSX.Element;
+export default Progress;

package/dist/Feedback/Feedback.Progress.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { motion } from "../tokens/motion";
+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, }) {
+    const translate = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (!indeterminate)
+            return;
+        const loop = Animated.loop(Animated.timing(translate, {
+            toValue: 1,
+            duration: motion.duration.slower,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+        }));
+        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: [
+                    {
+                        translateX: translate.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: ["-40%", "250%"],
+                        }),
+                    },
+                ],
+            } })) : (_jsx(View, { className: "h-full rounded-full bg-primary", style: { width: `${clamp(value) * 100}%` } })) }));
+}
+export default Progress;

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface ProgressCircleProps {
+    value?: number;
+    size?: number;
+    strokeWidth?: number;
+    color?: string;
+    trackColor?: string;
+    children?: ReactNode;
+    testID?: string;
+}
+declare function ProgressCircle({ value, size, strokeWidth, color, trackColor, children, testID, }: ProgressCircleProps): import("react").JSX.Element;
+export default ProgressCircle;

package/dist/Feedback/Feedback.ProgressCircle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+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, }) {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - clamp(value));
+    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] }));
+}
+export default ProgressCircle;

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

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

package/dist/Feedback/Feedback.Skeleton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { motion } from "../tokens/motion";
+import { useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+function Skeleton({ width = "100%", height = 16, radius = 8, circle = false, className, style, }) {
+    const opacity = useRef(new Animated.Value(0.5)).current;
+    useEffect(() => {
+        const pulse = Animated.loop(Animated.sequence([
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: motion.duration.slow,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+                toValue: 0.5,
+                duration: motion.duration.slow,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        pulse.start();
+        return () => pulse.stop();
+    }, [opacity]);
+    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 }] }));
+}
+export default Skeleton;

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

@@ -7,5 +7,5 @@ interface SplashScreenProps {
     message?: string;
     children?: ReactNode;
 }
-declare function Splash({ isReady, logo, minDuration, message, children, }: SplashScreenProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+declare function Splash({ isReady, logo, minDuration, message, children, }: SplashScreenProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 export default Splash;

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

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+export type ToastVariant = "info" | "success" | "warning" | "danger" | "loading";
+export interface ToastAction {
+    label: string;
+    onPress: () => void;
+}
+export interface ToastOptions {
+    message: string;
+    title?: string;
+    variant?: ToastVariant;
+    duration?: number;
+    action?: ToastAction;
+}
+type MessageOrFn<T> = string | ((value: T) => string);
+export interface ToastPromiseMessages<T> {
+    loading: string;
+    success: MessageOrFn<T>;
+    error: MessageOrFn<unknown>;
+}
+export interface ToastContextValue {
+    show: (options: ToastOptions) => string;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    hide: (id: string) => void;
+    info: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    success: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    warning: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    danger: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    loading: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>) => Promise<T>;
+}
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};

package/dist/Feedback/Toast.context.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
+import { ActivityIndicator, View } from "react-native";
+import Animated, { FadeInDown, FadeOutDown } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+const ToastContext = createContext(null);
+const DEFAULT_DURATION = 3500;
+const toast = tv({
+    slots: {
+        root: "flex-row items-center gap-3 rounded-lg px-4 py-3 bg-bg-card border-l-4 shadow-lg",
+        title: "text-sm font-semibold text-text-primary",
+        message: "text-sm text-text-secondary",
+    },
+    variants: {
+        variant: {
+            info: { root: "border-info" },
+            success: { root: "border-success" },
+            warning: { root: "border-warning" },
+            danger: { root: "border-danger" },
+            loading: { root: "border-primary" },
+        },
+    },
+    defaultVariants: { variant: "info" },
+});
+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 },
+};
+function ToastItem({ entry, onHide }) {
+    const variant = entry.variant ?? "info";
+    const styles = toast({ variant });
+    return (_jsxs(Animated.View, { accessibilityLiveRegion: "polite", accessible: true, className: styles.root(), entering: FadeInDown.duration(220), exiting: FadeOutDown.duration(180), children: [variant === "loading" ? (_jsx(ActivityIndicator, { color: theme.primary, 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-primary text-sm font-semibold", children: entry.action.label }) })) : null] }));
+}
+export function ToastProvider({ children }) {
+    const insets = useSafeAreaInsets();
+    const [toasts, setToasts] = useState([]);
+    const counter = useRef(0);
+    const timers = useRef({});
+    const clearTimer = useCallback((id) => {
+        const timer = timers.current[id];
+        if (timer) {
+            clearTimeout(timer);
+            delete timers.current[id];
+        }
+    }, []);
+    const hide = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+        clearTimer(id);
+    }, [clearTimer]);
+    const scheduleDismiss = useCallback((id, variant, duration) => {
+        clearTimer(id);
+        const resolved = duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
+        if (resolved > 0) {
+            timers.current[id] = setTimeout(() => hide(id), resolved);
+        }
+    }, [clearTimer, hide]);
+    const show = useCallback((options) => {
+        counter.current += 1;
+        const id = `toast-${counter.current}`;
+        setToasts((prev) => [...prev, { ...options, id }]);
+        scheduleDismiss(id, options.variant, options.duration);
+        return id;
+    }, [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 value = useMemo(() => {
+        const promise = (p, messages) => {
+            const id = show({ message: messages.loading, variant: "loading", duration: 0 });
+            return p.then((result) => {
+                const msg = messages.success;
+                update(id, {
+                    message: typeof msg === "function" ? msg(result) : msg,
+                    variant: "success",
+                    duration: DEFAULT_DURATION,
+                });
+                return result;
+            }, (err) => {
+                const msg = messages.error;
+                update(id, {
+                    message: typeof msg === "function" ? msg(err) : msg,
+                    variant: "danger",
+                    duration: DEFAULT_DURATION,
+                });
+                throw err;
+            });
+        };
+        return {
+            show,
+            update,
+            hide,
+            info: (message, options) => show({ ...options, message, variant: "info" }),
+            success: (message, options) => show({ ...options, message, variant: "success" }),
+            warning: (message, options) => show({ ...options, message, variant: "warning" }),
+            danger: (message, options) => show({ ...options, message, variant: "danger" }),
+            loading: (message, options) => show({ ...options, message, variant: "loading" }),
+            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: { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide }, entry.id))) })] }));
+}
+export function useToast() {
+    const ctx = useContext(ToastContext);
+    if (!ctx) {
+        throw new Error("useToast debe usarse dentro de <ToastProvider>");
+    }
+    return ctx;
+}

package/dist/Feedback/index.d.ts

@@ -1,13 +1,28 @@
+import Banner from "../Feedback/Feedback.Banner";
 import DomainSplashScreen from "../Feedback/Feedback.DomainSplashScreen";
 import Empty from "../Feedback/Feedback.Empty";
+import EmptyState from "../Feedback/Feedback.EmptyState";
 import Error from "../Feedback/Feedback.Error";
 import Loading from "../Feedback/Feedback.Loading";
+import PermissionCard from "../Feedback/Feedback.PermissionCard";
+import Progress from "../Feedback/Feedback.Progress";
+import ProgressCircle from "../Feedback/Feedback.ProgressCircle";
+import Skeleton from "../Feedback/Feedback.Skeleton";
+import SplashScreen from "../Feedback/Feedback.Splash";
 export { ErrorBoundary } from "../Feedback/ErrorBoundary";
+export { type ToastAction, type ToastContextValue, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastVariant, useToast, } from "../Feedback/Toast.context";
 export declare const Feedback: {
     Loading: typeof Loading;
     Spinner: import("react").FC<import("../Feedback/Feedback.Spinner").SpinnerProps>;
+    Skeleton: typeof Skeleton;
+    Progress: typeof Progress;
+    ProgressCircle: typeof ProgressCircle;
+    Banner: typeof Banner;
+    PermissionCard: typeof PermissionCard;
     Empty: typeof Empty;
+    EmptyState: typeof EmptyState;
     Error: typeof Error;
+    SplashScreen: typeof SplashScreen;
     DomainSplashScreen: typeof DomainSplashScreen;
 };
 export default Feedback;