@sincpro/mobile-ui 0.2.0 → 0.3.0

package/dist/Display/Display.Rating.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { View } from "react-native";
+function Rating({ value, max = 5, size = 24, onChange, readOnly = false, className, testID, }) {
+    const interactive = !readOnly && !!onChange;
+    return (_jsx(View, { accessibilityLabel: `Calificación ${value} de ${max}`, accessibilityRole: interactive ? "adjustable" : "image", className: className, style: { flexDirection: "row", gap: 4 }, testID: testID, children: Array.from({ length: max }).map((_, index) => {
+            const filled = index < Math.round(value);
+            const star = (_jsx(Icon, { color: filled ? theme.warning : theme.icon.disabled, name: filled ? "star" : "star-outline", size: size }));
+            if (!interactive)
+                return _jsx(View, { children: star }, index);
+            return (_jsx(Pressable, { accessibilityLabel: `${index + 1} estrellas`, hitSlop: 6, onPress: () => onChange?.(index + 1), children: star }, index));
+        }) }));
+}
+export default Rating;

package/dist/Display/Display.SearchHistory.d.ts

@@ -0,0 +1,12 @@
+export interface SearchHistoryProps {
+    items: string[];
+    onSelect: (value: string) => void;
+    onRemove: (value: string) => void;
+    onClearAll?: () => void;
+    title?: string;
+    icon?: string;
+    className?: string;
+    testID?: string;
+}
+declare function SearchHistory({ items, onSelect, onRemove, onClearAll, title, icon, className, testID, }: SearchHistoryProps): import("react").JSX.Element | null;
+export default SearchHistory;

package/dist/Display/Display.SearchHistory.js

@@ -0,0 +1,13 @@
+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 { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function SearchHistory({ items, onSelect, onRemove, onClearAll, title = "Búsquedas recientes", icon = "time-outline", className, testID, }) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between px-4 py-1", children: [_jsx(Typography.Text, { className: "text-text-secondary", semibold: true, variant: "bodySmall", children: title }), onClearAll ? (_jsx(Pressable, { accessibilityLabel: "Borrar todo", hitSlop: 8, onPress: onClearAll, children: _jsx(Typography.Text, { className: "text-primary", variant: "bodySmall", children: "Borrar todo" }) })) : null] }), items.map((value) => (_jsxs(Pressable, { accessibilityLabel: value, className: "flex-row items-center gap-3 px-4 py-2.5", onPress: () => onSelect(value), children: [_jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 18 }), _jsx(Typography.Text, { className: "flex-1 text-text-primary", numberOfLines: 1, children: value }), _jsx(Pressable, { accessibilityLabel: `Quitar ${value}`, hitSlop: 10, onPress: () => onRemove(value), children: _jsx(Icon, { color: theme.icon.tertiary, name: "close", size: 16 }) })] }, value)))] }));
+}
+export default SearchHistory;

package/dist/Display/Display.SectionHeader.d.ts

@@ -0,0 +1,13 @@
+export interface SectionHeaderAction {
+    label: string;
+    onPress: () => void;
+}
+export interface SectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    action?: SectionHeaderAction;
+    className?: string;
+    testID?: string;
+}
+declare function SectionHeader({ title, subtitle, action, className, testID }: SectionHeaderProps): import("react").JSX.Element;
+export default SectionHeader;

package/dist/Display/Display.SectionHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function SectionHeader({ title, subtitle, action, className, testID }) {
+    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), testID: testID, children: [_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, children: _jsx(Typography.Text, { className: "text-primary text-sm font-semibold", children: action.label }) })) : null] }));
+}
+export default SectionHeader;

package/dist/Display/Display.Stat.d.ts

@@ -0,0 +1,10 @@
+export interface StatProps {
+    value: string | number;
+    label: string;
+    align?: "center" | "start";
+    className?: string;
+    testID?: string;
+}
+declare function Stat({ value, label, align, className, testID }: StatProps): import("react").JSX.Element;
+export default Stat;
+export { Stat };

package/dist/Display/Display.Stat.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 Stat({ value, label, align = "center", className, testID }) {
+    return (_jsxs(View, { className: cn(align === "center" ? "items-center" : "items-start", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "subtitle", children: value }), _jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label })] }));
+}
+export default Stat;
+export { Stat };

package/dist/Display/Display.StatCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export interface StatCardProps {
+    label: string;
+    value: string | number;
+    icon?: string;
+    delta?: number;
+    deltaSuffix?: string;
+    hint?: string;
+    trailing?: ReactNode;
+    className?: string;
+    testID?: string;
+}
+declare function StatCard({ label, value, icon, delta, deltaSuffix, hint, trailing, className, testID, }: StatCardProps): import("react").JSX.Element;
+export default StatCard;

package/dist/Display/Display.StatCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 StatCard({ label, value, icon, delta, deltaSuffix = "%", hint, trailing, className, testID, }) {
+    const hasDelta = typeof delta === "number";
+    const up = hasDelta && delta >= 0;
+    const deltaColor = up ? theme.success : theme.danger;
+    return (_jsxs(View, { className: cn("bg-bg-card rounded-lg border border-border-light p-4 gap-1", className), style: theme.shadow.sm, testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: label }), icon ? _jsx(Icon, { color: theme.icon.secondary, name: icon, size: 18 }) : null, trailing] }), _jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "h3", children: value }), hasDelta || hint ? (_jsxs(View, { className: "flex-row items-center gap-1", children: [hasDelta ? (_jsxs(_Fragment, { children: [_jsx(Icon, { color: deltaColor, name: up ? "arrow-up" : "arrow-down", size: 14 }), _jsxs(Typography.Text, { style: { color: deltaColor }, variant: "bodySmall", children: [Math.abs(delta), deltaSuffix] })] })) : null, hint ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "bodySmall", children: hint })) : null] })) : null] }));
+}
+export default StatCard;

package/dist/Display/Display.StatusDot.d.ts

@@ -0,0 +1,11 @@
+export type StatusKind = "online" | "offline" | "busy" | "away";
+export interface StatusDotProps {
+    status?: StatusKind;
+    label?: string;
+    size?: number;
+    color?: string;
+    className?: string;
+    testID?: string;
+}
+declare function StatusDot({ status, label, size, color, className, testID, }: StatusDotProps): import("react").JSX.Element;
+export default StatusDot;

package/dist/Display/Display.StatusDot.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+const statusColor = {
+    online: theme.success,
+    offline: theme.icon.disabled,
+    busy: theme.danger,
+    away: theme.warning,
+};
+const statusLabel = {
+    online: "En línea",
+    offline: "Desconectado",
+    busy: "Ocupado",
+    away: "Ausente",
+};
+function StatusDot({ status = "online", label, size = 8, color, className, testID, }) {
+    const dotColor = color ?? statusColor[status];
+    const text = label ?? statusLabel[status];
+    return (_jsxs(View, { accessibilityLabel: text, className: cn("flex-row items-center gap-1.5", className), testID: testID, children: [_jsx(View, { style: {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    backgroundColor: dotColor,
+                } }), text ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: text })) : null] }));
+}
+export default StatusDot;

package/dist/Display/Display.Story.d.ts

@@ -0,0 +1,15 @@
+import { type ImageSourcePropType } from "react-native";
+export interface StoryProps {
+    image: ImageSourcePropType;
+    label?: string;
+    seen?: boolean;
+    variant?: "circle" | "card";
+    size?: number;
+    avatar?: ImageSourcePropType;
+    /** Mostrar el círculo del autor en la card. `false` = card de historia sin avatar. */
+    showAvatar?: boolean;
+    onPress?: () => void;
+    testID?: string;
+}
+declare function Story({ image, label, seen, variant, size, avatar, showAvatar, onPress, testID, }: StoryProps): import("react").JSX.Element;
+export default Story;

package/dist/Display/Display.Story.js

@@ -0,0 +1,43 @@
+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 { LinearGradient } from "expo-linear-gradient";
+import { Image, View } from "react-native";
+const RING = ["#F58529", "#DD2A7B"];
+function Story({ image, label, seen = false, variant = "circle", size = 68, avatar, showAvatar = true, onPress, testID, }) {
+    if (variant === "card") {
+        return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { width: size * 1.6, borderRadius: 14, overflow: "hidden" }, testID: testID, children: [_jsx(Image, { source: image, style: { width: "100%", height: size * 2.6 } }), showAvatar ? (_jsx(View, { style: {
+                        position: "absolute",
+                        top: 8,
+                        left: 8,
+                        borderRadius: 999,
+                        borderWidth: 3,
+                        borderColor: seen ? theme.border.strong : theme.primary,
+                    }, children: _jsx(Image, { source: avatar ?? image, style: { width: 34, height: 34, borderRadius: 17 } }) })) : null, label ? (_jsx(LinearGradient, { colors: ["transparent", "rgba(0,0,0,0.7)"], style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        padding: 8,
+                        paddingTop: 24,
+                    }, children: _jsx(Typography.Text, { className: "text-white", numberOfLines: 2, semibold: true, variant: "caption", children: label }) })) : null] }));
+    }
+    const ringPadding = 3;
+    const innerSize = size - ringPadding * 2 - 4;
+    return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { alignItems: "center", width: size + 8, gap: 4 }, testID: testID, children: [_jsx(LinearGradient, { colors: seen ? [theme.border.strong, theme.border.strong] : RING, style: {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(View, { style: {
+                        width: innerSize + 4,
+                        height: innerSize + 4,
+                        borderRadius: (innerSize + 4) / 2,
+                        backgroundColor: theme.bg.card,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(Image, { source: image, style: { width: innerSize, height: innerSize, borderRadius: innerSize / 2 } }) }) }), label ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: label })) : null] }));
+}
+export default Story;

package/dist/Display/Display.StoryTray.d.ts

@@ -0,0 +1,26 @@
+import { type ImageSourcePropType } from "react-native";
+export interface StoryTrayItem {
+    id: string;
+    image: ImageSourcePropType;
+    label?: string;
+    avatar?: ImageSourcePropType;
+    seen?: boolean;
+}
+export interface StoryTrayCreate {
+    label?: string;
+    image?: ImageSourcePropType;
+    onPress: () => void;
+}
+export interface StoryTrayProps {
+    stories: StoryTrayItem[];
+    onStoryPress?: (item: StoryTrayItem) => void;
+    create?: StoryTrayCreate;
+    variant?: "circle" | "card";
+    size?: number;
+    /** Mostrar el avatar del autor en cada card (solo variant="card"). */
+    showAvatar?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function StoryTray({ stories, onStoryPress, create, variant, size, showAvatar, className, testID, }: StoryTrayProps): import("react").JSX.Element;
+export default StoryTray;

package/dist/Display/Display.StoryTray.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Story from "../Display/Display.Story";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { Image, ScrollView, View } from "react-native";
+function CreateCard({ create, size }) {
+    const w = size * 1.6;
+    return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: {
+            width: w,
+            borderRadius: 14,
+            overflow: "hidden",
+            backgroundColor: theme.bg.card,
+            borderWidth: 1,
+            borderColor: theme.border.light,
+        }, children: [create.image ? (_jsx(Image, { source: create.image, style: { width: "100%", height: size * 1.7 } })) : (_jsx(View, { style: { width: "100%", height: size * 1.7, backgroundColor: theme.bg.muted } })), _jsxs(View, { style: { alignItems: "center", paddingVertical: 14 }, children: [_jsx(View, { style: {
+                            position: "absolute",
+                            top: -16,
+                            width: 32,
+                            height: 32,
+                            borderRadius: 16,
+                            backgroundColor: theme.primary,
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderWidth: 3,
+                            borderColor: theme.bg.card,
+                        }, children: _jsx(Icon, { color: theme.text.inverse, name: "add", size: 20 }) }), _jsx(Typography.Text, { className: "text-text-primary mt-2", semibold: true, variant: "caption", children: create.label ?? "Crear historia" })] })] }));
+}
+function CreateCircle({ create, size }) {
+    return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: { alignItems: "center", width: size + 8, gap: 4 }, children: [_jsx(View, { style: {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    backgroundColor: theme.bg.muted,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(Icon, { color: theme.primary, name: "add-circle", size: size * 0.5 }) }), _jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: create.label ?? "Crear" })] }));
+}
+function StoryTray({ stories, onStoryPress, create, variant = "card", size = 68, showAvatar = true, className, testID, }) {
+    return (_jsxs(ScrollView, { className: className, contentContainerStyle: { gap: 8, paddingHorizontal: 12, paddingVertical: 4 }, horizontal: true, showsHorizontalScrollIndicator: false, testID: testID, children: [create ? (variant === "card" ? (_jsx(CreateCard, { create: create, size: size })) : (_jsx(CreateCircle, { create: create, size: size }))) : null, stories.map((item) => (_jsx(Story, { avatar: item.avatar, image: item.image, label: item.label, onPress: () => onStoryPress?.(item), seen: item.seen, showAvatar: showAvatar, size: size, variant: variant }, item.id)))] }));
+}
+export default StoryTray;

package/dist/Display/Display.StoryViewer.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
+export interface StoryViewerSlide {
+    image: ImageSourcePropType;
+}
+export interface StoryViewerProps {
+    visible: boolean;
+    slides: StoryViewerSlide[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    time?: string;
+    avatar?: ImageSourcePropType;
+    progress?: number;
+    muted?: boolean;
+    paused?: boolean;
+    onToggleMute?: () => void;
+    onTogglePause?: () => void;
+    onMore?: () => void;
+    footer?: ReactNode;
+    testID?: string;
+}
+declare function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, subtitle, time, avatar, progress, muted, paused, onToggleMute, onTogglePause, onMore, footer, testID, }: StoryViewerProps): import("react").JSX.Element | null;
+export default StoryViewer;

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,14 +1,80 @@
+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 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 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;