@sincpro/mobile-ui 0.4.1 → 0.6.0

package/dist/Display/Display.CircleButton.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { useTheme } from "../theme";
+import { cn } from "../theme/tw";
+import { View } from "react-native";
+import { tv } from "tailwind-variants";
+const circleButtonVariants = tv({
+    base: "rounded-full items-center justify-center shadow-sm",
+    variants: {
+        size: {
+            sm: "w-12 h-12",
+            md: "w-15 h-15",
+            lg: "w-20 h-20",
+        },
+        variant: {
+            primary: "bg-primary",
+            secondary: "bg-secondary",
+            accent: "bg-accent",
+            success: "bg-success",
+            danger: "bg-danger",
+            warning: "bg-warning",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        variant: "accent",
+    },
+});
+const SIZE_MAP = {
+    sm: { icon: 24 },
+    md: { icon: 30 },
+    lg: { icon: 40 },
+};
+export function CircleButton({ iconType = "ionicons", size = "md", color, variant = "accent", className, customIcon, }) {
+    const theme = useTheme();
+    const iconColor = color ?? theme.text.inverse;
+    return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Icon, { color: iconColor, customIcon: customIcon, size: SIZE_MAP[size].icon, type: iconType }) }));
+}
+export default CircleButton;

package/dist/Display/Display.MenuButton.d.ts

@@ -1,5 +1,13 @@
+import { type SwipeRowAction } from "../Display/Display.SwipeableRow";
 import { type VariantProps } from "../theme/tw";
 import { ComponentType, ReactNode } from "react";
+export type MenuButtonSwipeAction = SwipeRowAction;
+/**
+ * Inline status/count badge on the right of the row.
+ * Presets: `"active"` (green pill), `"inactive"` (yellow pill), `"new"` (accent pill).
+ * Any string / number renders a danger count chip.
+ */
+export type MenuButtonBadge = "active" | "inactive" | "new" | string | number;
 declare const menuButton: import("tailwind-variants").TVReturnType<{
     variant: {
         default: {
@@ -10,6 +18,10 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
             iconContainer: string;
             label: string;
         };
+        success: {
+            iconContainer: string;
+            label: string;
+        };
     };
     showDivider: {
         true: {
@@ -27,8 +39,6 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     rightContainer: string;
-    chevronContainer: string;
-    chevron: string;
 }, undefined, {
     variant: {
         default: {
@@ -39,6 +49,10 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
             iconContainer: string;
             label: string;
         };
+        success: {
+            iconContainer: string;
+            label: string;
+        };
     };
     showDivider: {
         true: {
@@ -56,8 +70,6 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     rightContainer: string;
-    chevronContainer: string;
-    chevron: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         default: {
@@ -68,6 +80,10 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
             iconContainer: string;
             label: string;
         };
+        success: {
+            iconContainer: string;
+            label: string;
+        };
     };
     showDivider: {
         true: {
@@ -85,10 +101,8 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     rightContainer: string;
-    chevronContainer: string;
-    chevron: string;
 }, undefined, unknown, unknown, undefined>>;
-interface MenuButtonProps extends VariantProps<typeof menuButton> {
+export interface MenuButtonProps extends VariantProps<typeof menuButton> {
     icon?: ComponentType<{
         size?: number;
         color?: string;
@@ -96,8 +110,37 @@ interface MenuButtonProps extends VariantProps<typeof menuButton> {
     label: string;
     description?: string;
     onPress?: () => void;
+    /** Arbitrary right-side slot — takes precedence over all built-in right elements. */
     rightComponent?: ReactNode;
     className?: string;
+    /**
+     * Inline toggle switch on the right.
+     * The row's `onPress` is still fired when the row body is tapped.
+     * The switch itself calls `onToggle` independently.
+     */
+    toggle?: {
+        value: boolean;
+        onToggle: (v: boolean) => void;
+    };
+    /**
+     * Current-value label shown on the right before the chevron.
+     * Great for settings rows: "Siempre", "Nunca", "24 hs".
+     */
+    value?: string;
+    /**
+     * Status / count badge on the right.
+     * Presets: `"active"` | `"inactive"` | `"new"`.
+     * Any string or number renders a plain danger count chip.
+     */
+    badge?: MenuButtonBadge;
+    /** Replace right content with a spinner while an async action is running. */
+    loading?: boolean;
+    /**
+     * Swipe-left (right-side) or swipe-right (left-side) reveal actions.
+     * Delegates to `Display.SwipeableRow` — same `SwipeRowAction` shape.
+     */
+    swipeActions?: MenuButtonSwipeAction[];
+    swipeLeftActions?: MenuButtonSwipeAction[];
 }
-declare function MenuButton({ icon: Icon, label, description, onPress, rightComponent, showDivider, variant, disabled, className, }: MenuButtonProps): import("react").JSX.Element;
+declare function MenuButton({ icon: IconComp, label, description, onPress, rightComponent, showDivider, variant, disabled, className, toggle, value, badge, loading, swipeActions, swipeLeftActions, }: MenuButtonProps): import("react").JSX.Element;
 export default MenuButton;

package/dist/Display/Display.MenuButton.js

@@ -1,17 +1,60 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
+import SwipeableRow from "../Display/Display.SwipeableRow";
+import Spinner from "../Feedback/Feedback.Spinner";
+import { useTheme } from "../theme";
 import { tv } from "../theme/tw";
 import { Typography } from "../Typography";
-import { TouchableOpacity, View } from "react-native";
+import { Switch, TouchableOpacity, View } from "react-native";
+function BadgeChip({ badge }) {
+    const theme = useTheme();
+    if (badge === "active") {
+        return (_jsxs(View, { style: {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 4,
+                backgroundColor: theme.successLight,
+                paddingHorizontal: 8,
+                paddingVertical: 3,
+                borderRadius: 999,
+            }, children: [_jsx(View, { style: { width: 6, height: 6, borderRadius: 999, backgroundColor: theme.success } }), _jsx(Typography.Text, { semibold: true, style: { color: theme.success, fontSize: 11 }, variant: "caption", children: "Activo" })] }));
+    }
+    if (badge === "inactive") {
+        return (_jsxs(View, { style: {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 4,
+                backgroundColor: theme.warningLight,
+                paddingHorizontal: 8,
+                paddingVertical: 3,
+                borderRadius: 999,
+            }, children: [_jsx(View, { style: { width: 6, height: 6, borderRadius: 999, backgroundColor: theme.warning } }), _jsx(Typography.Text, { semibold: true, style: { color: theme.warning, fontSize: 11 }, variant: "caption", children: "Inactivo" })] }));
+    }
+    if (badge === "new") {
+        return (_jsx(View, { style: {
+                backgroundColor: theme.accent,
+                paddingHorizontal: 8,
+                paddingVertical: 3,
+                borderRadius: 999,
+            }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent, fontSize: 11 }, variant: "caption", children: "Nuevo" }) }));
+    }
+    return (_jsx(View, { style: {
+            backgroundColor: theme.danger,
+            minWidth: 20,
+            height: 20,
+            borderRadius: 999,
+            alignItems: "center",
+            justifyContent: "center",
+            paddingHorizontal: 6,
+        }, children: _jsx(Typography.Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, variant: "caption", children: badge }) }));
+}
+// ─── Tailwind slots ───────────────────────────────────────────────────────────
 const menuButton = tv({
     slots: {
         container: "flex-row items-center py-3 px-4 bg-bg-card",
         iconContainer: "mr-3 w-8 h-8 rounded-lg items-center justify-center",
         content: "flex-1",
         label: "",
-        rightContainer: "ml-2",
-        chevronContainer: "ml-2 w-5 h-5 items-center justify-center",
-        chevron: "text-xl",
+        rightContainer: "ml-2 flex-row items-center gap-2",
     },
     variants: {
         variant: {
@@ -23,16 +66,16 @@ const menuButton = tv({
                 iconContainer: "bg-danger-light",
                 label: "text-danger",
             },
+            success: {
+                iconContainer: "bg-success-light",
+                label: "text-success",
+            },
         },
         showDivider: {
-            true: {
-                container: "border-b border-border-default",
-            },
+            true: { container: "border-b border-border-default" },
         },
         disabled: {
-            true: {
-                container: "opacity-40",
-            },
+            true: { container: "opacity-40" },
         },
     },
     defaultVariants: {
@@ -41,10 +84,33 @@ const menuButton = tv({
         disabled: false,
     },
 });
-function MenuButton({ icon: Icon, label, description, onPress, rightComponent, showDivider = true, variant = "default", disabled = false, className, }) {
+// ─── Component ───────────────────────────────────────────────────────────────
+function MenuButton({ icon: IconComp, label, description, onPress, rightComponent, showDivider = true, variant = "default", disabled = false, className, toggle, value, badge, loading = false, swipeActions, swipeLeftActions, }) {
+    const theme = useTheme();
     const styles = menuButton({ variant, showDivider, disabled });
     const isDanger = variant === "danger";
     const isClickable = !!onPress && !disabled;
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.5, className: styles.container({ className }), disabled: disabled || !onPress, onPress: onPress, children: [Icon && (_jsx(View, { className: styles.iconContainer(), children: _jsx(Icon, { color: isDanger ? theme.danger : theme.text.secondary, size: 20 }) })), _jsxs(View, { className: styles.content(), children: [_jsx(Typography.Text, { className: styles.label(), variant: "body", children: label }), description && (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: description }))] }), rightComponent && _jsx(View, { className: styles.rightContainer(), children: rightComponent }), !rightComponent && isClickable && (_jsx(View, { className: styles.chevronContainer(), children: _jsx(Typography.Text, { className: styles.chevron(), children: "\u203A" }) }))] }));
+    const iconColor = isDanger ? theme.danger : theme.text.secondary;
+    // Right-side priority: loading > explicit slot > toggle > badge/value/chevron
+    const rightSlot = (() => {
+        if (loading)
+            return _jsx(Spinner, { size: "small" });
+        if (rightComponent)
+            return rightComponent;
+        if (toggle) {
+            return (_jsx(Switch, { onValueChange: toggle.onToggle, thumbColor: theme.bg.card, trackColor: { false: theme.border.strong, true: theme.accent }, value: toggle.value }));
+        }
+        const hasBadge = badge != null;
+        const hasValue = !!value;
+        const hasChevron = isClickable && !hasBadge;
+        if (!hasBadge && !hasValue && !hasChevron)
+            return null;
+        return (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [hasBadge ? _jsx(BadgeChip, { badge: badge }) : null, hasValue ? (_jsx(Typography.Text, { style: { color: theme.text.secondary }, variant: "bodySmall", children: value })) : null, isClickable ? (_jsx(Typography.Text, { style: { color: theme.text.tertiary, fontSize: 20 }, children: "\u203A" })) : null] }));
+    })();
+    const row = (_jsxs(TouchableOpacity, { activeOpacity: 0.5, className: styles.container({ className }), disabled: disabled || (!onPress && !toggle), onPress: onPress, children: [IconComp ? (_jsx(View, { className: styles.iconContainer(), children: _jsx(IconComp, { color: iconColor, size: 20 }) })) : null, _jsxs(View, { className: styles.content(), children: [_jsx(Typography.Text, { className: styles.label(), variant: "body", children: label }), description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: description })) : null] }), rightSlot ? _jsx(View, { className: styles.rightContainer(), children: rightSlot }) : null] }));
+    if (swipeActions?.length || swipeLeftActions?.length) {
+        return (_jsx(SwipeableRow, { leftActions: swipeLeftActions, rightActions: swipeActions, children: row }));
+    }
+    return row;
 }
 export default MenuButton;

package/dist/Display/Display.MenuCard.d.ts

@@ -0,0 +1,15 @@
+import { IconType } from "../utils/icon";
+import { ComponentType } from "react";
+export interface MenuCardProps {
+    title: string;
+    iconType?: IconType;
+    onPress?: () => void;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    /** `"md"` = 2-column grid (default). `"sm"` = 3-column grid, smaller icon. */
+    size?: "sm" | "md";
+}
+export declare function MenuCard({ title, iconType, onPress, customIcon, size, }: MenuCardProps): import("react").JSX.Element;
+export default MenuCard;

package/dist/Display/Display.MenuCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import CircleButton from "../Display/Display.CircleButton";
+import { useTheme } from "../theme";
+import { Typography } from "../Typography";
+import { TouchableOpacity, View } from "react-native";
+export function MenuCard({ title, iconType = "ionicons", onPress, customIcon, size = "md", }) {
+    const theme = useTheme();
+    const isSmall = size === "sm";
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: onPress, style: {
+            backgroundColor: theme.bg.card,
+            borderRadius: 16,
+            padding: isSmall ? 12 : 16,
+            margin: isSmall ? 4 : 8,
+            width: isSmall ? "30%" : "45%",
+            borderWidth: 1,
+            borderColor: theme.border.default,
+            ...theme.shadow.sm,
+        }, children: _jsxs(View, { style: { alignItems: "center", justifyContent: "center" }, children: [_jsx(CircleButton, { customIcon: customIcon, iconType: iconType, size: isSmall ? "sm" : "md" }), _jsx(Typography.Text, { numberOfLines: 2, style: {
+                        color: theme.text.primary,
+                        marginTop: isSmall ? 8 : 12,
+                        textAlign: "center",
+                    }, variant: isSmall ? "caption" : "label", children: title })] }) }));
+}
+export default MenuCard;

package/dist/Display/Display.MenuGrid.d.ts

@@ -0,0 +1,19 @@
+import { IconType } from "../utils/icon";
+import { ComponentType } from "react";
+export interface MenuGridItem {
+    id: string;
+    title: string;
+    iconType?: IconType;
+    onPress?: () => void;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+}
+export interface MenuGridProps {
+    items: MenuGridItem[];
+    /** `"md"` = 2-column (default). `"sm"` = 3-column, smaller cards. */
+    size?: "sm" | "md";
+}
+export declare function MenuGrid({ items, size }: MenuGridProps): import("react").JSX.Element;
+export default MenuGrid;

package/dist/Display/Display.MenuGrid.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import MenuCard from "../Display/Display.MenuCard";
+import { View } from "react-native";
+export function MenuGrid({ items, size = "md" }) {
+    return (_jsx(View, { className: "flex-row flex-wrap justify-start p-2 bg-bg-page", children: items.map((item) => (_jsx(MenuCard, { customIcon: item.customIcon, iconType: item.iconType, onPress: item.onPress, size: size, title: item.title }, item.id))) }));
+}
+export default MenuGrid;

package/dist/Display/Display.SwipeableRow.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
+import { useTheme } 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, }) {
+    const theme = useTheme();
     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();

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

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 export interface TooltipProps {
     content: string;
     children: ReactNode;
-    placement?: "top" | "bottom";
+    placement?: "top" | "bottom" | "left" | "right";
     width?: number;
     testID?: string;
 }

package/dist/Display/Display.Tooltip.js

@@ -1,18 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
+import { useTheme } from "../theme";
 import { Typography } from "../Typography";
 import { useState } from "react";
 import { View } from "react-native";
+function resolvePosition(placement) {
+    switch (placement) {
+        case "bottom":
+            return { top: "100%", left: 0, marginVertical: 6 };
+        case "left":
+            return { right: "100%", top: 0, marginHorizontal: 6 };
+        case "right":
+            return { left: "100%", top: 0, marginHorizontal: 6 };
+        case "top":
+        default:
+            return { bottom: "100%", left: 0, marginVertical: 6 };
+    }
+}
 function Tooltip({ content, children, placement = "top", width = 200, testID, }) {
+    const theme = useTheme();
     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,
+                    ...resolvePosition(placement),
                     width,
-                    marginVertical: 6,
                     paddingHorizontal: 10,
                     paddingVertical: 8,
                     borderRadius: 8,

package/dist/Display/index.d.ts

@@ -2,6 +2,7 @@ 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 { CircleButton } from "../Display/Display.CircleButton";
 import CopyableText from "../Display/Display.CopyableText";
 import CountRecords from "../Display/Display.CountRecords";
 import DataTable from "../Display/Display.DataTable";
@@ -15,6 +16,8 @@ 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 { MenuCard } from "../Display/Display.MenuCard";
+import { MenuGrid } from "../Display/Display.MenuGrid";
 import Monetary from "../Display/Display.Monetary";
 import Pattern from "../Display/Display.Pattern";
 import PriceTag from "../Display/Display.PriceTag";
@@ -84,9 +87,15 @@ export declare const Display: {
     Icon: import("react").FC<import("../Display/Display.Icon").IconProps>;
     CountRecords: typeof CountRecords;
     Logo: import("react").FC<import("../Display/Display.Logo").LogoProps>;
+    CircleButton: typeof CircleButton;
     MenuButton: typeof MenuButton;
+    MenuCard: typeof MenuCard;
+    MenuGrid: typeof MenuGrid;
     Monetary: typeof Monetary;
     Pattern: typeof Pattern;
 };
 export { type BadgeProps, BadgeVariants };
+export type { CircleButtonProps } from "../Display/Display.CircleButton";
+export type { MenuCardProps } from "../Display/Display.MenuCard";
+export type { MenuGridItem } from "../Display/Display.MenuGrid";
 export default Display;

package/dist/Display/index.js

@@ -5,6 +5,7 @@ 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 { CircleButton } from "../Display/Display.CircleButton";
 import CopyableText from "../Display/Display.CopyableText";
 import CountRecords from "../Display/Display.CountRecords";
 import DataTable from "../Display/Display.DataTable";
@@ -20,6 +21,8 @@ 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 { MenuCard } from "../Display/Display.MenuCard";
+import { MenuGrid } from "../Display/Display.MenuGrid";
 import Monetary from "../Display/Display.Monetary";
 import Pattern from "../Display/Display.Pattern";
 import PriceTag from "../Display/Display.PriceTag";
@@ -75,7 +78,10 @@ export const Display = {
     Icon,
     CountRecords,
     Logo,
+    CircleButton,
     MenuButton,
+    MenuCard,
+    MenuGrid,
     Monetary,
     Pattern,
 };

package/dist/Feedback/Feedback.Empty.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import Icon from "../Display/Display.Icon";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { View } from "react-native";
 function Empty({ handleGoHome, className }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Display.Icon, { name: "sad-cry", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Oops!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: "No se encontraron registros disponibles." })] }));
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { name: "sad-cry", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Oops!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: "No se encontraron registros disponibles." })] }));
 }
 export default Empty;

package/dist/Feedback/Feedback.Error.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import Icon from "../Display/Display.Icon";
 import Button from "../Form/Form.Button";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { View } from "react-native";
 function Error({ message, onRetry, onBack, onHome, className }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Display.Icon, { color: "#ef4444", name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && _jsx(Button, { className: "w-full", onPress: onRetry, title: "Reintentar" }), onBack && (_jsx(Button, { className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { color: "#ef4444", name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && _jsx(Button, { className: "w-full", onPress: onRetry, title: "Reintentar" }), onBack && (_jsx(Button, { className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
 }
 export default Error;

package/dist/Feedback/Feedback.Progress.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw";
 import { motion } from "../tokens/motion";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } 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;
+    const [translate] = useState(() => new Animated.Value(0));
     useEffect(() => {
         if (!indeterminate)
             return;

package/dist/Feedback/Feedback.Skeleton.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw";
 import { motion } from "../tokens/motion";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } 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;
+    const [opacity] = useState(() => new Animated.Value(0.5));
     useEffect(() => {
         const pulse = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {

package/dist/Feedback/Feedback.Splash.js

@@ -23,6 +23,7 @@ function Splash({ isReady, logo, minDuration = 800, message = "Inicializando..."
             clearTimeout(minDurationTimeoutRef.current);
         }
         if (!isReady) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setShowContent(false);
             return;
         }