@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/Display/Display.StoryViewer.js

@@ -0,0 +1,79 @@
+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 { Typography } from "../Typography";
+import { LinearGradient } from "expo-linear-gradient";
+import { Image, Modal, Pressable as RNPressable, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, subtitle, time, avatar, progress = 1, muted, paused, onToggleMute, onTogglePause, onMore, footer, testID, }) {
+    const insets = useSafeAreaInsets();
+    const current = slides[index];
+    const goPrev = () => {
+        if (index > 0)
+            onIndexChange(index - 1);
+    };
+    const goNext = () => {
+        if (index < slides.length - 1)
+            onIndexChange(index + 1);
+        else
+            onClose();
+    };
+    if (!current)
+        return null;
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true, transparent: false, visible: visible, children: _jsxs(View, { style: { flex: 1, backgroundColor: "#000" }, testID: testID, children: [_jsx(Image, { resizeMode: "contain", source: current.image, style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        width: "100%",
+                        height: "100%",
+                    } }), _jsxs(View, { style: {
+                        position: "absolute",
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        flexDirection: "row",
+                    }, children: [_jsx(RNPressable, { onPress: goPrev, style: { width: "33%" } }), _jsx(RNPressable, { onPress: goNext, style: { flex: 1 } })] }), _jsxs(LinearGradient, { colors: ["rgba(0,0,0,0.6)", "transparent"], style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        paddingTop: insets.top + 8,
+                        paddingHorizontal: 10,
+                    }, children: [_jsx(View, { style: { flexDirection: "row", gap: 4 }, children: slides.map((_, i) => (_jsx(View, { style: {
+                                    flex: 1,
+                                    height: 2.5,
+                                    borderRadius: 2,
+                                    backgroundColor: "rgba(255,255,255,0.35)",
+                                    overflow: "hidden",
+                                }, children: _jsx(View, { style: {
+                                        height: "100%",
+                                        width: i < index
+                                            ? "100%"
+                                            : i === index
+                                                ? `${Math.round(progress * 100)}%`
+                                                : "0%",
+                                        backgroundColor: "#fff",
+                                    } }) }, i))) }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", marginTop: 12 }, children: [avatar ? (_jsx(Image, { source: avatar, style: { width: 36, height: 36, borderRadius: 18, marginRight: 8 } })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [_jsx(Typography.Text, { className: "text-white", semibold: true, variant: "body", children: title }), time ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.7)" }, variant: "caption", children: time })) : null] }), subtitle ? (_jsx(Typography.Text, { numberOfLines: 1, style: { color: "rgba(255,255,255,0.8)" }, variant: "caption", children: subtitle })) : null] }), onToggleMute ? (_jsx(Pressable, { accessibilityLabel: muted ? "Activar sonido" : "Silenciar", hitSlop: 8, onPress: onToggleMute, children: _jsx(Icon, { color: "#fff", name: muted ? "volume-mute" : "volume-high", size: 22 }) })) : null, onTogglePause ? (_jsx(Pressable, { accessibilityLabel: paused ? "Reanudar" : "Pausar", hitSlop: 8, onPress: onTogglePause, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: paused ? "play" : "pause", size: 22 }) })) : null, onMore ? (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", hitSlop: 8, onPress: onMore, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "ellipsis-horizontal", size: 22 }) })) : null, _jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "close", size: 24 }) })] })] }), index < slides.length - 1 ? (_jsx(Pressable, { accessibilityLabel: "Siguiente", onPress: goNext, style: {
+                        position: "absolute",
+                        right: 8,
+                        top: "50%",
+                        width: 36,
+                        height: 36,
+                        borderRadius: 18,
+                        backgroundColor: "rgba(255,255,255,0.9)",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(Icon, { color: theme.text.primary, name: "chevron-forward", size: 22 }) })) : null, footer ? (_jsx(View, { style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        paddingBottom: insets.bottom + 8,
+                        paddingHorizontal: 16,
+                    }, children: footer })) : null] }) }));
+}
+export default StoryViewer;

package/dist/Display/Display.SwipeableRow.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface SwipeRowAction {
+    label?: string;
+    icon?: string;
+    color?: string;
+    onPress: () => void;
+}
+export interface SwipeableRowProps {
+    children: ReactNode;
+    rightActions?: SwipeRowAction[];
+    leftActions?: SwipeRowAction[];
+    testID?: string;
+}
+declare function SwipeableRow({ children, rightActions, leftActions, testID }: SwipeableRowProps): import("react").JSX.Element;
+export default SwipeableRow;

package/dist/Display/Display.SwipeableRow.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Swipeable } from "react-native-gesture-handler";
+function ActionButtons({ actions, onDone, }) {
+    return (_jsx(View, { style: { flexDirection: "row" }, children: actions.map((action, index) => (_jsxs(TouchableOpacity, { accessibilityLabel: action.label ?? "Acción", accessibilityRole: "button", activeOpacity: 0.8, onPress: () => {
+                onDone();
+                action.onPress();
+            }, style: {
+                backgroundColor: action.color ?? theme.danger,
+                justifyContent: "center",
+                alignItems: "center",
+                paddingHorizontal: 20,
+            }, children: [action.icon ? (_jsx(Icon, { color: theme.text.inverse, name: action.icon, size: 20 })) : null, action.label ? (_jsx(Typography.Text, { className: "text-text-inverse text-xs mt-1", children: action.label })) : null] }, index))) }));
+}
+function SwipeableRow({ children, rightActions, leftActions, testID }) {
+    const ref = useRef(null);
+    const close = () => ref.current?.close();
+    return (_jsx(Swipeable, { ref: ref, renderLeftActions: leftActions?.length
+            ? () => _jsx(ActionButtons, { actions: leftActions, onDone: close })
+            : undefined, renderRightActions: rightActions?.length
+            ? () => _jsx(ActionButtons, { actions: rightActions, onDone: close })
+            : undefined, testID: testID, children: children }));
+}
+export default SwipeableRow;

package/dist/Display/Display.Tag.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface TagProps {
+    label: string;
+    leading?: ReactNode;
+    dotColor?: string;
+    className?: string;
+    testID?: string;
+}
+declare function Tag({ label, leading, dotColor, className, testID }: TagProps): import("react").JSX.Element;
+export default Tag;
+export { Tag };

package/dist/Display/Display.Tag.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function Tag({ label, leading, dotColor, className, testID }) {
+    return (_jsxs(View, { className: cn("flex-row items-center self-start rounded-full bg-bg-muted px-2.5 py-1 gap-1.5", className), testID: testID, children: [dotColor ? (_jsx(View, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: dotColor } })) : null, leading, _jsx(Typography.Text, { className: "text-text-secondary text-xs font-medium", numberOfLines: 1, children: label })] }));
+}
+export default Tag;
+export { Tag };

package/dist/Display/Display.Timeline.d.ts

@@ -0,0 +1,13 @@
+export interface TimelineStep {
+    title: string;
+    description?: string;
+    time?: string;
+}
+export interface TimelineProps {
+    steps: TimelineStep[];
+    current: number;
+    className?: string;
+    testID?: string;
+}
+declare function Timeline({ steps, current, className, testID }: TimelineProps): import("react").JSX.Element;
+export default Timeline;

package/dist/Display/Display.Timeline.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function Timeline({ steps, current, className, testID }) {
+    return (_jsx(View, { className: className, testID: testID, children: steps.map((step, index) => {
+            const done = index < current;
+            const active = index === current;
+            const reached = done || active;
+            const isLast = index === steps.length - 1;
+            const dotColor = reached ? theme.primary : theme.bg.muted;
+            return (_jsxs(View, { className: "flex-row", children: [_jsxs(View, { className: "items-center", style: { width: 28 }, children: [_jsx(View, { className: "w-6 h-6 rounded-full items-center justify-center", style: { backgroundColor: dotColor }, children: done ? (_jsx(Icon, { color: theme.text.inverse, name: "checkmark", size: 14 })) : (_jsx(View, { className: "w-2 h-2 rounded-full", style: {
+                                        backgroundColor: active ? theme.text.inverse : theme.border.strong,
+                                    } })) }), !isLast ? (_jsx(View, { className: "flex-1 w-0.5 my-1", style: { backgroundColor: done ? theme.primary : theme.border.default } })) : null] }), _jsxs(View, { className: cn("flex-1 pb-5", isLast && "pb-0"), children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: reached ? "text-text-primary" : "text-text-tertiary", semibold: active, variant: "body", children: step.title }), step.time ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: step.time })) : null] }), step.description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: step.description })) : null] })] }, step.title));
+        }) }));
+}
+export default Timeline;

package/dist/Display/Display.Tooltip.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export interface TooltipProps {
+    content: string;
+    children: ReactNode;
+    placement?: "top" | "bottom";
+    width?: number;
+    testID?: string;
+}
+declare function Tooltip({ content, children, placement, width, testID, }: TooltipProps): import("react").JSX.Element;
+export default Tooltip;

package/dist/Display/Display.Tooltip.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import { View } from "react-native";
+function Tooltip({ content, children, placement = "top", width = 200, testID, }) {
+    const [visible, setVisible] = useState(false);
+    const isTop = placement === "top";
+    return (_jsxs(View, { style: { position: "relative", alignSelf: "flex-start" }, testID: testID, children: [_jsx(Pressable, { accessibilityHint: content, accessibilityRole: "button", onPress: () => setVisible((v) => !v), children: children }), visible ? (_jsx(View, { style: {
+                    position: "absolute",
+                    [isTop ? "bottom" : "top"]: "100%",
+                    left: 0,
+                    width,
+                    marginVertical: 6,
+                    paddingHorizontal: 10,
+                    paddingVertical: 8,
+                    borderRadius: 8,
+                    backgroundColor: theme.text.primary,
+                    ...theme.shadow.md,
+                    zIndex: 1700,
+                }, children: _jsx(Typography.Text, { style: { color: theme.bg.card }, variant: "bodySmall", children: content }) })) : null] }));
+}
+export default Tooltip;

package/dist/Display/index.d.ts

@@ -1,22 +1,92 @@
+import AvatarGroup from "../Display/Display.AvatarGroup";
 import Badge, { type BadgeProps, BadgeVariants } from "../Display/Display.Badge";
+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 GradientSurface from "../Display/Display.GradientSurface";
+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 MediaCard from "../Display/Display.MediaCard";
+import MediaEmbed from "../Display/Display.MediaEmbed";
 import MenuButton from "../Display/Display.MenuButton";
 import Monetary from "../Display/Display.Monetary";
+import Pattern from "../Display/Display.Pattern";
+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 declare const Display: {
     Badge: typeof Badge;
     BadgeVariants: typeof BadgeVariants;
+    Accordion: (({ children, className }: {
+        children: import("react").ReactNode;
+        className?: string;
+    }) => import("react").JSX.Element) & {
+        Item: ({ title, children, defaultOpen, className, testID, }: import("../Display/Display.Accordion").AccordionItemProps) => import("react").JSX.Element;
+    };
     Avatar: import("react").FC<import("../Display/Display.Avatar").AvatarProps>;
+    AvatarGroup: typeof AvatarGroup;
+    Card: (({ padding, elevation, onPress, className, children, testID, }: import("../Display/Display.Card").CardProps) => import("react").JSX.Element) & {
+        Title: ({ children, className }: {
+            children: import("react").ReactNode;
+            className?: string;
+        }) => import("react").JSX.Element;
+        Footer: ({ children, className }: {
+            children: import("react").ReactNode;
+            className?: string;
+        }) => import("react").JSX.Element;
+    };
+    Carousel: typeof Carousel;
+    Chip: typeof Chip;
+    Tag: typeof Tag;
+    Image: typeof DisplayImage;
+    MediaCard: typeof MediaCard;
+    MediaEmbed: typeof MediaEmbed;
+    Story: typeof Story;
+    StoryTray: typeof StoryTray;
+    StoryViewer: typeof StoryViewer;
+    ListItem: typeof ListItem;
+    KeyValue: typeof KeyValue;
+    DataTable: typeof DataTable;
+    Stat: typeof Stat;
+    StatCard: typeof StatCard;
+    StatusDot: typeof StatusDot;
+    PriceTag: typeof PriceTag;
+    ProductCard: typeof ProductCard;
+    Timeline: typeof Timeline;
+    SearchHistory: typeof SearchHistory;
+    SectionHeader: typeof SectionHeader;
+    Rating: typeof Rating;
+    SwipeableRow: typeof SwipeableRow;
+    Tooltip: typeof Tooltip;
+    IconBadge: typeof IconBadge;
     CopyableText: typeof CopyableText;
     Date: typeof Date;
     Divider: typeof Divider;
+    GradientSurface: typeof GradientSurface;
     Icon: import("react").FC<import("../Display/Display.Icon").IconProps>;
     CountRecords: typeof CountRecords;
     Logo: import("react").FC<import("../Display/Display.Logo").LogoProps>;
     MenuButton: typeof MenuButton;
     Monetary: typeof Monetary;
+    Pattern: typeof Pattern;
 };
 export { type BadgeProps, BadgeVariants };
 export default Display;

package/dist/Display/index.js

@@ -1,25 +1,83 @@
+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 GradientSurface from "../Display/Display.GradientSurface";
 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 Pattern from "../Display/Display.Pattern";
+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,
+    GradientSurface,
     Icon,
     CountRecords,
     Logo,
     MenuButton,
     Monetary,
+    Pattern,
 };
 export { BadgeVariants };
 export default Display;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientContainer from "../layouts/GradientContainer";
+import GradientSurface from "../Display/Display.GradientSurface";
+import Pattern from "../Display/Display.Pattern";
 import { Typography } from "../Typography";
 import { useCallback, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
@@ -57,7 +58,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: _jsxs(GradientSurface, { preset: "night-green", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [_jsx(Pattern, { color: "#22E584", kind: "dots", opacity: 0.14, size: 26 }), _jsx(View, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-5", children: [_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 24, letterSpacing: 0.5 }, children: isComplete ? "¡Listo!" : `Cargando ${domainName}` }), !isComplete && (_jsx(View, { className: "w-full rounded-full h-1.5 overflow-hidden", style: { backgroundColor: "rgba(255,255,255,0.18)" }, children: _jsx(Animated.View, { className: "rounded-full h-1.5", style: [{ backgroundColor: "#22E584" }, progressBarStyle] }) })), isComplete && (_jsxs(Typography.Text, { style: { color: "rgba(255,255,255,0.8)", fontSize: 13 }, 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,15 @@
+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;
+/**
+ * Full-screen centered loading state. Thin layout convenience over `Spinner` (the atom):
+ * `Spinner` is the inline indicator (ActivityIndicator + optional text); `LoadingState`
+ * is `Spinner` centered with `flex-1` for an empty screen/section. Use `Spinner` directly
+ * when you need an inline/footer indicator (e.g. pagination), `LoadingState` for a blank view.
+ */
+declare function LoadingState({ message, size, style, className, }: LoadingStateProps): React.JSX.Element;
 export default LoadingState;

package/dist/Feedback/Feedback.Loading.js

@@ -2,7 +2,13 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import Spinner from "../Feedback/Feedback.Spinner";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
-function LoadingState({ message = "Actualizando lista de órdenes", size = "small", style = {}, className, }) {
+/**
+ * Full-screen centered loading state. Thin layout convenience over `Spinner` (the atom):
+ * `Spinner` is the inline indicator (ActivityIndicator + optional text); `LoadingState`
+ * is `Spinner` centered with `flex-1` for an empty screen/section. Use `Spinner` directly
+ * when you need an inline/footer indicator (e.g. pagination), `LoadingState` for a blank view.
+ */
+function LoadingState({ message = "Cargando…", size = "small", 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 }) }));
 }
 export default LoadingState;