@sincpro/mobile 0.1.1 → 0.2.0

package/dist/ui/components/molecules/ProcessToast.js

@@ -1,51 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { useCommon } from "../../../entrypoints/ui/common_provider";
-import { Display } from "@sincpro/mobile-ui/Display";
-import { Feedback } from "@sincpro/mobile-ui/Feedback";
-import { theme } from "@sincpro/mobile-ui/theme";
-import { cn } from "@sincpro/mobile-ui/theme/tw";
-import { Typography } from "@sincpro/mobile-ui/Typography";
-import { useEffect, useState } from "react";
-import { Animated, Platform, TouchableOpacity, View } from "react-native";
-const Icon = Display.Icon;
-const Spinner = Feedback.Spinner;
-const Text = Typography.Text;
-function ProcessToast({ position = "top" }) {
-    const { currentActivity, lastError, isProcessing, dismiss } = useCommon();
-    const [slideAnim] = useState(new Animated.Value(-100));
-    const [showError, setShowError] = useState(false);
+import { useToast } from "@sincpro/mobile-ui/Feedback";
+import { useEffect, useRef } from "react";
+const MAX_ERROR_LEN = 150;
+/**
+ * Bridges the framework's queue/cron activity state (from CommonProvider) to the
+ * design-system Toast: a persistent `loading` toast while a queue/cron task runs, and a
+ * `danger` toast on failure. Renders nothing — the toast UI is owned by the DS
+ * `ToastProvider` (mounted in AppShell), so this must live inside it.
+ */
+function ProcessToast() {
+    const { currentActivity, lastError, isProcessing } = useCommon();
+    const toast = useToast();
+    const loadingIdRef = useRef(null);
+    const shownErrorRef = useRef(null);
     useEffect(() => {
-        if (lastError)
-            setShowError(true);
-    }, [lastError]);
+        const showLoading = isProcessing && !lastError;
+        if (showLoading) {
+            const label = currentActivity?.label ?? "Sincronizando...";
+            if (loadingIdRef.current) {
+                toast.update(loadingIdRef.current, { message: label, variant: "loading" });
+            }
+            else {
+                loadingIdRef.current = toast.loading(label);
+            }
+        }
+        else if (loadingIdRef.current) {
+            toast.hide(loadingIdRef.current);
+            loadingIdRef.current = null;
+        }
+    }, [isProcessing, lastError, currentActivity, toast]);
     useEffect(() => {
-        Animated.spring(slideAnim, {
-            toValue: isProcessing ? 0 : position === "top" ? -100 : 100,
-            tension: 300,
-            friction: 25,
-            useNativeDriver: true,
-        }).start();
-    }, [isProcessing, slideAnim, position]);
-    function renderToast() {
-        if (!isProcessing) {
-            return null;
+        if (!lastError) {
+            shownErrorRef.current = null;
+            return;
         }
-        const hasError = !!lastError;
-        const activity = lastError || currentActivity;
-        const label = activity?.label || "Sincronizando...";
-        function handleDismiss() {
-            setShowError(false);
-            dismiss();
+        const key = `${lastError.id}:${lastError.error ?? ""}`;
+        if (shownErrorRef.current === key) {
+            return;
         }
-        return (_jsx(Animated.View, { className: "absolute left-4 right-4 z-50 self-center", style: [
-                position === "top"
-                    ? { top: Platform.OS === "ios" ? 100 : 60 }
-                    : { bottom: Platform.OS === "ios" ? 100 : 80 },
-                { transform: [{ translateY: slideAnim }] },
-            ], children: _jsxs(View, { className: cn("bg-white/[0.98] rounded-xl px-3.5 py-3 border-l-[3px] border-emerald-500 shadow-md", hasError && "bg-red-50/[0.98] border-red-500"), children: [_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(View, { className: "w-5 h-5 justify-center items-center", children: hasError ? (_jsx(Icon, { color: theme.danger, name: "alert-circle", size: 16 })) : (_jsx(Spinner, { size: "small" })) }), _jsx(View, { className: "flex-1", children: _jsx(Text, { className: "text-gray-900 text-[13px] font-medium leading-4", variant: "captionSmall", children: hasError ? `Error: ${label}` : label }) }), _jsx(TouchableOpacity, { accessibilityLabel: "Cerrar notificación", className: "w-6 h-6 justify-center items-center rounded-full bg-gray-100", onPress: handleDismiss, children: _jsx(Icon, { color: theme.text.secondary, name: "close", size: 14 }) })] }), showError && lastError?.error && (_jsx(View, { className: "mt-2 pt-2 border-t border-gray-100", children: _jsx(Text, { className: "text-red-500 text-[11px] leading-[15px] font-mono", variant: "captionSmall", children: lastError.error.length > 150
-                                ? `${lastError.error.substring(0, 150)}...`
-                                : lastError.error }) }))] }) }));
-    }
-    return renderToast();
+        shownErrorRef.current = key;
+        const raw = lastError.error;
+        const detail = raw
+            ? raw.length > MAX_ERROR_LEN
+                ? `${raw.slice(0, MAX_ERROR_LEN)}...`
+                : raw
+            : undefined;
+        toast.danger(detail ?? lastError.label, { title: `Error: ${lastError.label}` });
+    }, [lastError, toast]);
+    return null;
 }
 export default ProcessToast;

package/dist/ui/components/molecules/ProcessToastProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import ProcessToast from "./ProcessToast";
 export function ProcessToastProvider({ children }) {
-    return (_jsxs(_Fragment, { children: [children, _jsx(ProcessToast, { position: "top" })] }));
+    return (_jsxs(_Fragment, { children: [children, _jsx(ProcessToast, {})] }));
 }

package/dist/ui/components/molecules/TimeZoneSelector.d.ts

@@ -0,0 +1,7 @@
+import { TimezoneLocale } from "./timezone";
+interface TimeZoneSelectorProps {
+    onSelect?: (tz: TimezoneLocale) => void;
+    timezone?: string | null;
+}
+export declare function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/molecules/TimeZoneSelector.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { Display, Form } from "@sincpro/mobile-ui/index";
+import { theme } from "@sincpro/mobile-ui/theme/useTheme";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { useState } from "react";
+import { View } from "react-native";
+import { TimeZoneSelectorModal } from "./TimeZoneSelectorModal";
+export function TimeZoneSelector({ onSelect, timezone }) {
+    const [currentTimezone, setCurrentTimezone] = useState(timezone);
+    const [selectorVisible, setSelectorVisible] = useState(false);
+    function handleTimezoneSelected(tz) {
+        setCurrentTimezone(tz.timezone);
+        onSelect?.(tz);
+    }
+    const displayTimezone = currentTimezone
+        ? currentTimezone.replace(/_/g, " ").replace("America/", "")
+        : "No configurada";
+    return (_jsxs(Display.Card, { className: "my-2.5", children: [_jsxs(View, { className: "flex-row items-start", children: [_jsx(Display.Icon, { color: currentTimezone ? theme.info : theme.text.tertiary, name: "schedule", size: 35, type: "material" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: "Zona Horaria" }), currentTimezone ? (_jsxs(View, { className: "mt-2 bg-bg-card rounded-lg p-3", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, children: displayTimezone }), _jsx(Typography.Text, { className: "text-text-tertiary text-xs", children: currentTimezone }), _jsx(View, { className: "flex-row gap-2 mt-2", children: _jsx(Form.Button, { onPress: () => setSelectorVisible(true), size: "small", title: "Cambiar", variant: "outline" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: "text-text-secondary mb-2", children: "Selecciona una zona horaria" }), _jsx(Form.Button, { onPress: () => setSelectorVisible(true), size: "small", title: "Seleccionar Zona Horaria", variant: "cta" })] }))] })] }), _jsx(TimeZoneSelectorModal, { currentTimezone: currentTimezone, onClose: () => setSelectorVisible(false), onSelect: handleTimezoneSelected, visible: selectorVisible })] }));
+}

package/dist/ui/components/molecules/TimeZoneSelectorModal.d.ts

@@ -0,0 +1,9 @@
+import { TimezoneLocale } from "./timezone";
+interface TimeZoneSelectorModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSelect: (tz: TimezoneLocale) => void;
+    currentTimezone?: string | null;
+}
+declare function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }: TimeZoneSelectorModalProps): import("react/jsx-runtime").JSX.Element;
+export { TimeZoneSelectorModal };

package/dist/ui/components/molecules/TimeZoneSelectorModal.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Sheet from "@sincpro/mobile-ui/Dialog/Sheet";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { Form } from "@sincpro/mobile-ui/Form";
+import { useTheme } from "@sincpro/mobile-ui/theme";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { useMemo, useState } from "react";
+import { TextInput, TouchableOpacity, View } from "react-native";
+const TIMEZONES_LOCALES = {
+    bolivia: { timezone: "America/La_Paz", locale: "es-BO" },
+    costaRica: { timezone: "America/Costa_Rica", locale: "es-CR" },
+    guatemala: { timezone: "America/Guatemala", locale: "es-GT" },
+    argentina: { timezone: "America/Argentina/Buenos_Aires", locale: "es-AR" },
+    peru: { timezone: "America/Lima", locale: "es-PE" },
+    newYork: { timezone: "America/New_York", locale: "en-US" },
+    japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
+};
+function TimezoneRow({ item, isSelected, onSelect, }) {
+    const theme = useTheme();
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 rounded-xl ${isSelected ? "bg-bg-accent" : "bg-bg-card"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: isSelected ? theme.accent : theme.text.secondary, name: "schedule", size: 24, type: "material" }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: item.label }), _jsx(Typography.Text, { className: "text-text-tertiary text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-accent items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
+}
+function EmptyState() {
+    const theme = useTheme();
+    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 200 }, children: [_jsx(Display.Icon, { color: theme.text.tertiary, name: "search-off", size: 48, type: "material" }), _jsx(Typography.Text, { className: "text-text-secondary text-center mt-4", children: "No se encontraron zonas horarias" })] }));
+}
+function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }) {
+    const theme = useTheme();
+    const [query, setQuery] = useState("");
+    const [selectedTimezone, setSelectedTimezone] = useState(currentTimezone || null);
+    const timezoneList = useMemo(() => {
+        return Object.values(TIMEZONES_LOCALES).map((tz) => ({
+            ...tz,
+            label: tz.timezone.replace(/_/g, " ").replace("America/", ""),
+        }));
+    }, []);
+    const filteredTimezones = useMemo(() => {
+        if (!query.trim())
+            return timezoneList;
+        const normalizedQuery = query
+            .toLowerCase()
+            .normalize("NFD")
+            .replace(/[\u0300-\u036f]/g, "");
+        return timezoneList.filter(({ label, timezone }) => {
+            const normalizedLabel = label
+                .toLowerCase()
+                .normalize("NFD")
+                .replace(/[\u0300-\u036f]/g, "");
+            const normalizedTz = timezone.toLowerCase();
+            return (normalizedLabel.includes(normalizedQuery) || normalizedTz.includes(normalizedQuery));
+        });
+    }, [query, timezoneList]);
+    function handleConfirm() {
+        const selected = timezoneList.find((tz) => tz.timezone === selectedTimezone);
+        if (selected) {
+            onSelect({ timezone: selected.timezone, locale: selected.locale });
+            onClose();
+        }
+    }
+    return (_jsxs(Sheet, { onClose: onClose, title: "Zona Horaria", visible: visible, children: [_jsx(Typography.Text, { className: "text-text-secondary text-xs mb-3", children: "Selecciona tu zona horaria" }), _jsx(TextInput, { className: "bg-bg-muted px-4 py-3 rounded-xl mb-2", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, value: query }), filteredTimezones.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(View, { className: "gap-1", children: filteredTimezones.map((item) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) }, item.timezone))) })), _jsxs(View, { className: "flex-row gap-2 mt-4", children: [_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedTimezone ? (_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: handleConfirm, title: "Confirmar", variant: "cta" }) })) : null] })] }));
+}
+export { TimeZoneSelectorModal };

package/dist/ui/components/molecules/index.d.ts

@@ -1,5 +1,9 @@
 export { BluetoothDeviceSelectorModal } from "./BluetoothDeviceSelectorModal";
 export { default as DeadLetterErrorBlock } from "./DeadLetterErrorBlock";
 export { default as EventTimelineItem } from "./EventTimelineItem";
+export { default as GeoPermissionCard } from "./GeoPermissionCard";
 export { default as ProcessToast } from "./ProcessToast";
 export { ProcessToastProvider } from "./ProcessToastProvider";
+export type { TimezoneLocale } from "./timezone";
+export { TimeZoneSelector } from "./TimeZoneSelector";
+export { TimeZoneSelectorModal } from "./TimeZoneSelectorModal";

package/dist/ui/components/molecules/index.js

@@ -1,5 +1,8 @@
 export { BluetoothDeviceSelectorModal } from "./BluetoothDeviceSelectorModal";
 export { default as DeadLetterErrorBlock } from "./DeadLetterErrorBlock";
 export { default as EventTimelineItem } from "./EventTimelineItem";
+export { default as GeoPermissionCard } from "./GeoPermissionCard";
 export { default as ProcessToast } from "./ProcessToast";
 export { ProcessToastProvider } from "./ProcessToastProvider";
+export { TimeZoneSelector } from "./TimeZoneSelector";
+export { TimeZoneSelectorModal } from "./TimeZoneSelectorModal";

package/dist/ui/components/molecules/timezone.d.ts

@@ -0,0 +1,4 @@
+export interface TimezoneLocale {
+    timezone: string;
+    locale: string;
+}

package/dist/ui/components/molecules/timezone.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/organisms/BluetoothPrinterSelector.d.ts

@@ -2,6 +2,8 @@ import { ISelectedPrinter } from "../../../domain/print";
 interface BluetoothPrinterSelectorProps {
     onPrinterSelected?: (printer: ISelectedPrinter) => void;
     onConnectionChange?: (isConnected: boolean) => void;
+    /** Render as section rows (no outer card) — use inside FormViewV2.Content.Section. */
+    compact?: boolean;
 }
-declare function BluetoothPrinterSelector({ onPrinterSelected, onConnectionChange, }: BluetoothPrinterSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function BluetoothPrinterSelector({ onPrinterSelected, onConnectionChange, compact, }: BluetoothPrinterSelectorProps): import("react/jsx-runtime").JSX.Element;
 export { BluetoothPrinterSelector };

package/dist/ui/components/organisms/BluetoothPrinterSelector.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { bluetoothService } from "../../../services/bluetooth.service";
 import { printerService } from "../../../services/printer.service";
+import PrinterIcon from "../../../ui/components/atoms/PrinterIcon";
 import { BluetoothDeviceSelectorModal } from "../../../ui/components/molecules/BluetoothDeviceSelectorModal";
-import { Display, Form } from "@sincpro/mobile-ui";
-import PrinterIcon from "@sincpro/mobile-ui/icons/PrinterIcon";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { Form } from "@sincpro/mobile-ui/Form";
+import { useTheme } from "@sincpro/mobile-ui/theme";
 import { Typography } from "@sincpro/mobile-ui/Typography";
 import { useCallback, useEffect, useState } from "react";
 import { View } from "react-native";
@@ -11,21 +13,22 @@ import { tv } from "tailwind-variants";
 const statusTextVariants = tv({
     variants: {
         granted: {
-            true: "text-green-600",
-            false: "text-red-500",
+            true: "text-success",
+            false: "text-danger",
         },
     },
 });
 function PermissionRequired({ loading, onRequestPermission, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: statusTextVariants({ granted: false }), children: "Permiso de Bluetooth requerido" }), _jsx(Form.Button, { loading: loading, onPress: onRequestPermission, size: "small", title: "Solicitar Permiso" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: statusTextVariants({ granted: false }), children: "Permiso de Bluetooth requerido" }), _jsx(Form.Button, { loading: loading, onPress: onRequestPermission, size: "small", title: "Solicitar Permiso", variant: "cta" })] }));
 }
 function PrinterInfo({ printer, isConnected, loading, onConnect, onTestPrint, onChangePrinter, }) {
-    return (_jsxs(View, { className: "mt-2 bg-white rounded-lg p-3", children: [_jsx(Typography.Text, { className: "text-gray-700", semibold: true, children: printer.name }), _jsx(Typography.Text, { className: "text-gray-400 text-xs", children: printer.address }), _jsxs(View, { className: "flex-row gap-2 mt-2", children: [!isConnected ? (_jsx(Form.Button, { loading: loading, onPress: onConnect, size: "small", title: "Conectar", variant: "primary" })) : (_jsx(Form.Button, { loading: loading, onPress: onTestPrint, size: "small", title: "Imprimir Prueba", variant: "secondary" })), _jsx(Form.Button, { onPress: onChangePrinter, size: "small", title: "Cambiar", variant: "outline" })] }), isConnected && (_jsxs(View, { className: "flex-row items-center mt-2", children: [_jsx(View, { className: "w-2 h-2 rounded-full bg-green-500 mr-2" }), _jsx(Typography.Text, { className: "text-green-600 text-xs", children: "Conectado" })] }))] }));
+    return (_jsxs(View, { className: "mt-2 bg-bg-muted rounded-lg p-3", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, children: printer.name }), _jsx(Typography.Text, { className: "text-text-tertiary text-xs", children: printer.address }), _jsxs(View, { className: "flex-row gap-2 mt-2", children: [!isConnected ? (_jsx(Form.Button, { loading: loading, onPress: onConnect, size: "small", title: "Conectar", variant: "cta" })) : (_jsx(Form.Button, { loading: loading, onPress: onTestPrint, size: "small", title: "Imprimir Prueba", variant: "secondary" })), _jsx(Form.Button, { onPress: onChangePrinter, size: "small", title: "Cambiar", variant: "outline" })] }), isConnected && (_jsxs(View, { className: "flex-row items-center mt-2", children: [_jsx(View, { className: "w-2 h-2 rounded-full bg-success mr-2" }), _jsx(Typography.Text, { className: "text-success text-xs", children: "Conectado" })] }))] }));
 }
 function NoPrinterSelected({ loading, onSelectPrinter, }) {
-    return (_jsx(Form.Button, { loading: loading, onPress: onSelectPrinter, size: "small", title: "Seleccionar Impresora" }));
+    return (_jsx(Form.Button, { loading: loading, onPress: onSelectPrinter, size: "small", title: "Seleccionar Impresora", variant: "cta" }));
 }
-function BluetoothPrinterSelector({ onPrinterSelected, onConnectionChange, }) {
+function BluetoothPrinterSelector({ onPrinterSelected, onConnectionChange, compact = false, }) {
+    const theme = useTheme();
     const [hasPermission, setHasPermission] = useState(null);
     const [selectedPrinter, setSelectedPrinter] = useState(null);
     const [isConnected, setIsConnected] = useState(false);
@@ -87,6 +90,23 @@ function BluetoothPrinterSelector({ onPrinterSelected, onConnectionChange, }) {
         onPrinterSelected?.(printer);
     }
     const granted = hasPermission === true;
-    return (_jsxs(View, { className: "bg-slate-50 rounded-xl p-5 my-2.5 shadow-sm", children: [_jsxs(View, { className: "flex-row items-start", children: [_jsx(Display.Icon, { color: granted ? "#22c55e" : "#ef4444", customIcon: PrinterIcon, size: 35, type: "custom" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: "Impresora Bluetooth" }), hasPermission === null ? (_jsx(Typography.Text, { className: "text-gray-500", children: "Verificando permisos..." })) : !granted ? (_jsx(PermissionRequired, { loading: loading, onRequestPermission: handleRequestPermission })) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: statusTextVariants({ granted: true }), children: "Bluetooth habilitado" }), selectedPrinter ? (_jsx(PrinterInfo, { isConnected: isConnected, loading: loading, onChangePrinter: () => setSelectorVisible(true), onConnect: handleConnect, onTestPrint: handleTestPrint, printer: selectedPrinter })) : (_jsx(NoPrinterSelected, { loading: loading, onSelectPrinter: () => setSelectorVisible(true) }))] }))] })] }), _jsx(BluetoothDeviceSelectorModal, { onClose: () => setSelectorVisible(false), onSelect: handleDeviceSelected, visible: selectorVisible })] }));
+    const modal = (_jsx(BluetoothDeviceSelectorModal, { onClose: () => setSelectorVisible(false), onSelect: handleDeviceSelected, visible: selectorVisible }));
+    if (compact) {
+        if (hasPermission === null) {
+            return (_jsxs(_Fragment, { children: [_jsx(Display.MenuButton, { description: "Verificando permisos...", icon: PrinterIcon, label: "Impresora Bluetooth", showDivider: false }), modal] }));
+        }
+        if (!granted) {
+            return (_jsxs(_Fragment, { children: [_jsx(Display.MenuButton, { description: "Permiso de Bluetooth requerido", icon: PrinterIcon, label: "Impresora Bluetooth", onPress: handleRequestPermission, showDivider: false }), modal] }));
+        }
+        if (!selectedPrinter) {
+            return (_jsxs(_Fragment, { children: [_jsx(Display.MenuButton, { description: "No configurada", icon: PrinterIcon, label: "Impresora Bluetooth", onPress: () => setSelectorVisible(true), showDivider: false }), modal] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(Display.MenuButton, { description: loading
+                        ? "Conectando..."
+                        : isConnected
+                            ? "Conectado"
+                            : "Sin conexión — toca para conectar", icon: PrinterIcon, label: selectedPrinter.name, onPress: !isConnected && !loading ? handleConnect : undefined }), _jsx(Display.MenuButton, { description: "Seleccionar otro dispositivo", icon: PrinterIcon, label: "Cambiar impresora", onPress: () => setSelectorVisible(true), showDivider: false }), modal] }));
+    }
+    return (_jsxs(Display.Card, { className: "my-2.5", children: [_jsxs(View, { className: "flex-row items-start", children: [_jsx(Display.Icon, { color: granted ? theme.success : theme.danger, customIcon: PrinterIcon, size: 35, type: "custom" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: "Impresora Bluetooth" }), hasPermission === null ? (_jsx(Typography.Text, { className: "text-text-secondary", children: "Verificando permisos..." })) : !granted ? (_jsx(PermissionRequired, { loading: loading, onRequestPermission: handleRequestPermission })) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: statusTextVariants({ granted: true }), children: "Bluetooth habilitado" }), selectedPrinter ? (_jsx(PrinterInfo, { isConnected: isConnected, loading: loading, onChangePrinter: () => setSelectorVisible(true), onConnect: handleConnect, onTestPrint: handleTestPrint, printer: selectedPrinter })) : (_jsx(NoPrinterSelected, { loading: loading, onSelectPrinter: () => setSelectorVisible(true) }))] }))] })] }), _jsx(BluetoothDeviceSelectorModal, { onClose: () => setSelectorVisible(false), onSelect: handleDeviceSelected, visible: selectorVisible })] }));
 }
 export { BluetoothPrinterSelector };

package/dist/ui/components/organisms/DatabaseInfoRow.js

@@ -3,6 +3,6 @@ import { Display } from "@sincpro/mobile-ui/Display";
 import { ListViewV2 } from "@sincpro/mobile-ui/views/ListViewV2";
 import { View } from "react-native";
 function DatabaseInfoRow({ item, onPress }) {
-    return (_jsxs(ListViewV2.Content.Row, { onPress: onPress, children: [_jsx(ListViewV2.Content.Row.Avatar, { children: _jsx(View, { className: "justify-center items-center p-2 rounded-lg bg-gray-100", children: _jsx(Display.Icon, { name: "database", size: 32, type: "antdesign" }) }) }), _jsxs(ListViewV2.Content.Row.Content, { children: [_jsx(ListViewV2.Content.Row.Title, { numberOfLines: 2, children: item.name }), _jsx(ListViewV2.Content.Row.Subtitle, { children: item.description || "N/A" })] })] }));
+    return (_jsxs(ListViewV2.Content.Row, { onPress: onPress, children: [_jsx(ListViewV2.Content.Row.Avatar, { children: _jsx(View, { className: "justify-center items-center p-2 rounded-lg bg-bg-muted", children: _jsx(Display.Icon, { name: "database", size: 32, type: "antdesign" }) }) }), _jsxs(ListViewV2.Content.Row.Content, { children: [_jsx(ListViewV2.Content.Row.Title, { numberOfLines: 2, children: item.name }), _jsx(ListViewV2.Content.Row.Subtitle, { children: item.description || "N/A" })] })] }));
 }
 export default DatabaseInfoRow;

package/dist/ui/components/organisms/DeadLetterQueueRow.js

@@ -54,19 +54,19 @@ function DeadLetterQueueRow({ item, onRetry }) {
         return (_jsxs(View, { className: "flex-row items-start mb-2", children: [_jsxs(View, { className: "flex-1 pr-2", children: [_jsx(Typography.Text, { className: "mb-1", numberOfLines: 2, semibold: true, variant: "body", children: friendlyName }), _jsx(Display.CopyableText, { value: event.name })] }), _jsx(View, { className: "ml-2 self-start", children: renderBadges() })] }));
     }
     function renderMeta() {
-        return (_jsxs(View, { className: "flex-row items-center justify-between mb-3", children: [_jsx(Display.Date, { className: "text-gray-800", showTime: true, textVariant: "bodySmall", value: event.createdAt }), _jsx(Display.CopyableText, { label: "Copiar UUID", value: event.uuid })] }));
+        return (_jsxs(View, { className: "flex-row items-center justify-between mb-3", children: [_jsx(Display.Date, { className: "text-text-primary", showTime: true, textVariant: "bodySmall", value: event.createdAt }), _jsx(Display.CopyableText, { label: "Copiar UUID", value: event.uuid })] }));
     }
     function renderPayload() {
         if (!showPayload) {
             return null;
         }
-        return (_jsxs(View, { className: "bg-gray-50 rounded-lg p-2 border border-gray-200 mb-2.5", children: [_jsx(Typography.Text, { className: "text-gray-700 mb-1", semibold: true, variant: "bodySmall", children: "Payload" }), _jsx(JsonPreview, { selectedJson: event.asJSON(true) })] }));
+        return (_jsxs(View, { className: "bg-bg-muted rounded-lg p-2 border border-border-default mb-2.5", children: [_jsx(Typography.Text, { className: "text-text-primary mb-1", semibold: true, variant: "bodySmall", children: "Payload" }), _jsx(JsonPreview, { selectedJson: event.asJSON(true) })] }));
     }
     function renderActions() {
         return (_jsxs(View, { className: "mt-2 gap-2", children: [_jsx(Form.Button, { className: "w-full", onPress: () => setShowError((v) => !v), size: "small", title: showError ? "Ocultar error" : "Ver error", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", onPress: togglePayload, size: "small", title: showPayload ? "Ocultar payload" : "Ver payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", onPress: async () => {
                         await Clipboard.setStringAsync(event.asJSON(true));
                     }, size: "small", title: "Copiar payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", disabled: sending, loading: sending, onPress: handleRetry, size: "medium", title: sending ? "Reintentando…" : "Reintentar", variant: "primary" })] }));
     }
-    return (_jsxs(View, { className: "bg-white border border-gray-200 rounded-2xl mx-4 p-3.5 mb-3 shadow-sm", children: [renderHeader(), renderMeta(), _jsx(DeadLetterErrorBlock, { errorMessage: event.errorMessage, expanded: showError, onToggle: () => setShowError((v) => !v) }), renderPayload(), renderActions()] }));
+    return (_jsxs(View, { className: "bg-bg-card border border-border-default rounded-2xl mx-4 p-3.5 mb-3 shadow-sm", children: [renderHeader(), renderMeta(), _jsx(DeadLetterErrorBlock, { errorMessage: event.errorMessage, expanded: showError, onToggle: () => setShowError((v) => !v) }), renderPayload(), renderActions()] }));
 }
 export default DeadLetterQueueRow;

package/dist/ui/components/organisms/EventRow.js

@@ -17,28 +17,28 @@ function EventRow({ item, onRetry }) {
     const statusBadge = (() => {
         if (item.status === EEventStatus.FAILED) {
             return {
-                backgroundClass: "bg-red-100 border-red-200",
-                textClass: "text-red-700",
+                backgroundClass: "bg-danger-light border-danger",
+                textClass: "text-danger",
                 label: "FAILED",
             };
         }
         if (item.status === EEventStatus.ACKNOWLEDGED) {
             return {
-                backgroundClass: "bg-green-100 border-green-200",
-                textClass: "text-green-700",
+                backgroundClass: "bg-success-light border-success",
+                textClass: "text-success",
                 label: "ACKNOWLEDGED",
             };
         }
         if (item.status === EEventStatus.PENDING || item.status === EEventStatus.PROCESSING) {
             return {
-                backgroundClass: "bg-blue-100 border-blue-200",
-                textClass: "text-blue-700",
+                backgroundClass: "bg-info-light border-info",
+                textClass: "text-info",
                 label: item.status,
             };
         }
         return {
-            backgroundClass: "bg-gray-100 border-gray-200",
-            textClass: "text-gray-700",
+            backgroundClass: "bg-bg-muted border-border-default",
+            textClass: "text-text-primary",
             label: item.status,
         };
     })();
@@ -54,15 +54,15 @@ function EventRow({ item, onRetry }) {
         }
     };
     function renderMeta() {
-        return (_jsxs(View, { className: "flex-row items-center justify-between mb-3", children: [_jsx(Display.Date, { className: "text-gray-800", showTime: true, textVariant: "bodySmall", value: item.createdAt }), _jsx(Display.CopyableText, { label: "Copiar UUID", value: item.uuid })] }));
+        return (_jsxs(View, { className: "flex-row items-center justify-between mb-3", children: [_jsx(Display.Date, { className: "text-text-primary", showTime: true, textVariant: "bodySmall", value: item.createdAt }), _jsx(Display.CopyableText, { label: "Copiar UUID", value: item.uuid })] }));
     }
     function renderBadges() {
         const badges = [];
         const statusVariantMap = {
-            "bg-red-100 border-red-200": "danger",
-            "bg-green-100 border-green-200": "successDark",
-            "bg-blue-100 border-blue-200": "infoDark",
-            "bg-gray-100 border-gray-200": "warning",
+            "bg-danger-light border-danger": "danger",
+            "bg-success-light border-success": "successDark",
+            "bg-info-light border-info": "infoDark",
+            "bg-bg-muted border-border-default": "warning",
         };
         const variant = statusVariantMap[statusBadge.backgroundClass] || "info";
         badges.push(_jsx(Display.Badge, { className: "self-end", label: statusBadge.label, variant: variant }, "status"));
@@ -78,13 +78,13 @@ function EventRow({ item, onRetry }) {
         if (!showPayload) {
             return null;
         }
-        return (_jsxs(View, { className: "bg-gray-50 rounded-lg p-2 border border-gray-200 mb-2", children: [_jsx(Typography.Text, { className: "text-gray-700 mb-1", semibold: true, variant: "bodySmall", children: "Payload" }), _jsx(JsonPreview, { selectedJson: payloadString })] }));
+        return (_jsxs(View, { className: "bg-bg-muted rounded-lg p-2 border border-border-default mb-2", children: [_jsx(Typography.Text, { className: "text-text-primary mb-1", semibold: true, variant: "bodySmall", children: "Payload" }), _jsx(JsonPreview, { selectedJson: payloadString })] }));
     }
     function renderActions() {
         return (_jsxs(View, { className: "mt-2 gap-2", children: [_jsx(Form.Button, { className: "w-full", onPress: () => setShowPayload((v) => !v), size: "small", title: showPayload ? "Ocultar payload" : "Ver payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", onPress: async () => {
                         await Clipboard.setStringAsync(payloadString);
                     }, size: "small", title: "Copiar payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", disabled: sending, loading: sending, onPress: handleRetry, size: "medium", title: sending ? "Reenviando…" : "Re-disparar", variant: "primary" })] }));
     }
-    return (_jsxs(View, { className: "bg-white border border-gray-200 rounded-2xl mx-4 p-3.5 mb-3 shadow-sm", children: [_jsxs(View, { className: "flex-row items-start mb-2", children: [_jsxs(View, { className: "flex-1 pr-2", children: [_jsx(Typography.Text, { className: "mb-1", numberOfLines: 2, semibold: true, variant: "body", children: friendlyName }), _jsx(Display.CopyableText, { value: item.name })] }), _jsx(View, { className: "ml-2 self-start", children: renderBadges() })] }), renderMeta(), renderPayload(), renderActions()] }));
+    return (_jsxs(View, { className: "bg-bg-card border border-border-default rounded-2xl mx-4 p-3.5 mb-3 shadow-sm", children: [_jsxs(View, { className: "flex-row items-start mb-2", children: [_jsxs(View, { className: "flex-1 pr-2", children: [_jsx(Typography.Text, { className: "mb-1", numberOfLines: 2, semibold: true, variant: "body", children: friendlyName }), _jsx(Display.CopyableText, { value: item.name })] }), _jsx(View, { className: "ml-2 self-start", children: renderBadges() })] }), renderMeta(), renderPayload(), renderActions()] }));
 }
 export default EventRow;

package/dist/ui/components/organisms/InjectableWebView.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { loggerUseCases } from "../../../infrastructure/logger";
 import { webViewService } from "../../../services/webview.service";
+import { useToast } from "@sincpro/mobile-ui/Feedback";
 import Spinner from "@sincpro/mobile-ui/Feedback/Feedback.Spinner";
+import { useBottomInset } from "@sincpro/mobile-ui/layouts/BottomInset";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { BackHandler, StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import Toast from "react-native-toast-message";
 import WebView from "react-native-webview";
 function WebViewControls({ canGoBack: _canGoBack, canGoForward: _canGoForward, onGoBack: _onGoBack, onGoForward: _onGoForward, onReload: _onReload, }) {
     return _jsx(View, {});
@@ -14,6 +15,7 @@ function WebViewLoadingIndicator({ backgroundColor }) {
     return (_jsx(View, { style: [StyleSheet.absoluteFillObject, styles.loading, { backgroundColor }], children: _jsx(Spinner, { size: "large", text: "Cargando p\u00E1gina..." }) }));
 }
 function useWebView() {
+    const toast = useToast();
     const webViewRef = useRef(null);
     const [canGoBack, setCanGoBack] = useState(false);
     const [retryCount, setRetryCount] = useState(0);
@@ -37,11 +39,11 @@ function useWebView() {
     const hardRefresh = useCallback(() => {
         if (webViewRef.current) {
             loggerUseCases.info("Hard refresh: Clearing cache and reloading");
-            Toast.show({
-                type: "info",
-                text1: "Limpiando caché...",
-                text2: "Descargando cliente fresco",
-                visibilityTime: 2000,
+            toast.show({
+                variant: "info",
+                title: "Limpiando caché...",
+                message: "Descargando cliente fresco",
+                duration: 2000,
             });
             if (webViewRef.current.clearCache) {
                 webViewRef.current.clearCache(true);
@@ -52,7 +54,7 @@ function useWebView() {
                 }
             }, 300);
         }
-    }, []);
+    }, [toast]);
     useEffect(() => {
         const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
             if (canGoBack) {
@@ -88,7 +90,9 @@ function useWebView() {
 }
 function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavigationChange, onLoadStart, onLoadEnd, onError, renderLoading, backgroundColor = "#f8f8f8", reloadKey, hardRefreshKey, maxRetries = 2, useDefaultCache = true, }) {
     const { webViewRef, handleNavigationStateChange, retryCount, setRetryCount, reload, hardRefresh, errorTimeoutRef, loadingTimeoutRef, isLoadingRef, } = useWebView();
+    const bottomInset = useBottomInset();
     const finalScript = webViewService.combineScripts(scripts, injectedJavaScript);
+    const [isLoading, setIsLoading] = useState(true);
     function handleMessage(event) {
         onMessage?.(event);
     }
@@ -98,6 +102,7 @@ function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavi
     }
     function handleLoadStart() {
         isLoadingRef.current = true;
+        setIsLoading(true);
         if (loadingTimeoutRef.current) {
             clearTimeout(loadingTimeoutRef.current);
         }
@@ -111,6 +116,7 @@ function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavi
     }
     function handleLoadEnd() {
         isLoadingRef.current = false;
+        setIsLoading(false);
         if (loadingTimeoutRef.current) {
             clearTimeout(loadingTimeoutRef.current);
             loadingTimeoutRef.current = null;
@@ -156,8 +162,12 @@ function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavi
         }
     }, [hardRefreshKey, hardRefresh]);
     const cacheMode = useDefaultCache ? "LOAD_DEFAULT" : "LOAD_NO_CACHE";
-    return (_jsx(SafeAreaView, { className: "flex-1", edges: ["top", "bottom"], style: { backgroundColor }, children: _jsx(WebView, { allowsBackForwardNavigationGestures: true, cacheEnabled: true, cacheMode: cacheMode, domStorageEnabled: true, injectedJavaScript: finalScript, javaScriptEnabled: true, mixedContentMode: "compatibility", onError: handleError, onLoadEnd: handleLoadEnd, onLoadStart: handleLoadStart, onMessage: handleMessage, onNavigationStateChange: handleNavigationStateChangeInternal, ref: webViewRef, renderLoading: renderLoading ||
-                (() => _jsx(WebViewLoadingIndicator, { backgroundColor: backgroundColor })), scalesPageToFit: true, sharedCookiesEnabled: true, source: { uri: url }, startInLoadingState: true, style: { flex: 1, backgroundColor } }) }));
+    return (
+    // Outer full-bleed container: under edge-to-edge (SDK 54+ / targetSdk 36) the window
+    // draws behind the transparent system bars. The loading overlay lives here (NOT inside
+    // the inset SafeAreaView) so it covers the whole screen and also shows on reload/refresh.
+    _jsxs(View, { style: { flex: 1, backgroundColor }, children: [_jsx(SafeAreaView, { className: "flex-1", edges: ["bottom"], style: { backgroundColor, marginBottom: bottomInset }, children: _jsx(WebView, { allowsBackForwardNavigationGestures: true, cacheEnabled: true, cacheMode: cacheMode, domStorageEnabled: true, injectedJavaScript: finalScript, javaScriptEnabled: true, mixedContentMode: "compatibility", onError: handleError, onLoadEnd: handleLoadEnd, onLoadStart: handleLoadStart, onMessage: handleMessage, onNavigationStateChange: handleNavigationStateChangeInternal, ref: webViewRef, scalesPageToFit: true, sharedCookiesEnabled: true, source: { uri: url }, style: { flex: 1, backgroundColor } }) }), isLoading &&
+                (renderLoading ? (renderLoading()) : (_jsx(WebViewLoadingIndicator, { backgroundColor: backgroundColor })))] }));
 }
 const styles = StyleSheet.create({
     loading: {

package/dist/ui/components/organisms/TableInfoInfoRow.js

@@ -14,6 +14,6 @@ function TableInfoRow({ item, onPress }) {
         messageId += `[${parsedData.uuid})]`;
     }
     const jsonString = safeJsonStringify(parsedData);
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "bg-white p-4 rounded-xl my-2 shadow-sm", onPress: onPress, children: _jsxs(View, { children: [_jsx(Typography.Text, { className: "mb-2", variant: "caption", children: parsedData.name || "Sin Nombre" }), _jsx(Typography.Text, { numberOfLines: 1, semibold: true, variant: "body", children: messageId || "Sin Identificador" }), parsedData.status && (_jsxs(Typography.Text, { variant: "label", children: ["Estado: ", parsedData.status] })), _jsx(Typography.Text, { className: "text-gray-500", ellipsizeMode: "tail", numberOfLines: 2, variant: "bodySmall", children: jsonString })] }) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "bg-bg-card p-4 rounded-xl my-2 shadow-sm", onPress: onPress, children: _jsxs(View, { children: [_jsx(Typography.Text, { className: "mb-2", variant: "caption", children: parsedData.name || "Sin Nombre" }), _jsx(Typography.Text, { numberOfLines: 1, semibold: true, variant: "body", children: messageId || "Sin Identificador" }), parsedData.status && (_jsxs(Typography.Text, { variant: "label", children: ["Estado: ", parsedData.status] })), _jsx(Typography.Text, { className: "text-text-secondary", ellipsizeMode: "tail", numberOfLines: 2, variant: "bodySmall", children: jsonString })] }) }));
 }
 export default TableInfoRow;

package/dist/ui/screens/database/database.json_detail.js

@@ -1,19 +1,19 @@
 import { jsxs as _jsxs, jsx as _jsx } from "nativewind/jsx-runtime";
 import { Display } from "@sincpro/mobile-ui/Display";
 import { Form } from "@sincpro/mobile-ui/Form";
-import { theme } from "@sincpro/mobile-ui/theme";
+import { useTheme } from "@sincpro/mobile-ui/theme";
 import { Typography } from "@sincpro/mobile-ui/Typography";
 import { FormViewV2 } from "@sincpro/mobile-ui/views/FormViewV2";
 import JsonPreview from "@sincpro/mobile-ui/widgets/JSONViewer";
-import { EVariantScreenHeader } from "@sincpro/mobile-ui/widgets/ScreenHeader";
 import * as Clipboard from "expo-clipboard";
 import { View } from "react-native";
 import { useDatabase } from "./database.context";
 const Button = Form.Button;
 const Icon = Display.Icon;
 function JsonDetailView() {
+    const theme = useTheme();
     const { selectedTable, selectedRowJson, goBackFromJson, currentRowIndex, filteredData, hasNextRow, hasPreviousRow, goToNextRow, goToPreviousRow, } = useDatabase();
-    return (_jsxs(FormViewV2.Root, { description: `JSON VIEWER - ${selectedTable}`, isLoading: false, item: { json: selectedRowJson }, name: "Detalles", onBack: goBackFromJson, children: [_jsx(FormViewV2.Header, { variant: EVariantScreenHeader.FLAT_HEADER, children: _jsx(FormViewV2.Header.Actions, { children: _jsxs(Typography.Text, { className: "text-gray-500", variant: "bodySmall", children: [currentRowIndex + 1, " de ", filteredData.length] }) }) }), _jsx(FormViewV2.Content, { children: _jsx(JsonPreview, { selectedJson: selectedRowJson }) }), _jsx(FormViewV2.Footer, { children: _jsxs(View, { className: "flex-row items-center justify-between gap-3", children: [_jsx(Button, { className: "flex-none min-w-[50px]", disabled: !hasPreviousRow, icon: _jsx(Icon, { color: hasPreviousRow ? theme.secondary : theme.text.tertiary, name: "chevron-left", size: 24, type: "feather" }), onPress: goToPreviousRow, title: "", variant: "secondary" }), _jsx(Button, { className: "flex-1", onPress: async () => {
+    return (_jsxs(FormViewV2.Root, { description: `JSON VIEWER - ${selectedTable}`, isLoading: false, item: { json: selectedRowJson }, name: "Detalles", onBack: goBackFromJson, children: [_jsx(FormViewV2.Header, { variant: "default", children: _jsx(FormViewV2.Header.Actions, { children: _jsxs(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: [currentRowIndex + 1, " de ", filteredData.length] }) }) }), _jsx(FormViewV2.Content, { children: _jsx(JsonPreview, { selectedJson: selectedRowJson }) }), _jsx(FormViewV2.Footer, { children: _jsxs(View, { className: "flex-row items-center justify-between gap-3", children: [_jsx(Button, { className: "flex-none min-w-[50px]", disabled: !hasPreviousRow, icon: _jsx(Icon, { color: hasPreviousRow ? theme.secondary : theme.text.tertiary, name: "chevron-left", size: 24, type: "feather" }), onPress: goToPreviousRow, title: "", variant: "secondary" }), _jsx(Button, { className: "flex-1", onPress: async () => {
                                 await Clipboard.setStringAsync(selectedRowJson);
                             }, title: "Copiar JSON", variant: "primary" }), _jsx(Button, { className: "flex-none min-w-[50px]", disabled: !hasNextRow, icon: _jsx(Icon, { color: hasNextRow ? theme.secondary : theme.text.tertiary, name: "chevron-right", size: 24, type: "feather" }), onPress: goToNextRow, title: "", variant: "secondary" })] }) })] }));
 }

package/dist/ui/screens/database/database.list.js

@@ -1,22 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { useNavigation } from "@react-navigation/native";
 import DatabaseInfoRow from "../../../ui/components/organisms/DatabaseInfoRow";
 import { ListViewV2 } from "@sincpro/mobile-ui/views/ListViewV2";
-import { EVariantScreenHeader } from "@sincpro/mobile-ui/widgets/ScreenHeader";
 import { useEffect } from "react";
-import { useNavigate } from "react-router-native";
 import { DatabaseProvider, EDatabaseView, useDatabase } from "./database.context";
 import JsonDetailView from "./database.json_detail";
 import TableRowsView from "./database.table_rows";
 function TablesView() {
-    const navigate = useNavigate();
+    const navigation = useNavigation();
     const { loadTables, isLoading, tables, selectTable } = useDatabase();
     useEffect(() => {
         void loadTables();
     }, [loadTables]);
-    const onBack = () => navigate(-1);
+    const onBack = () => navigation.goBack();
     return (_jsxs(ListViewV2.Root, { isLoading: isLoading, items: tables, name: "Lista de tablas", onBack: onBack, onPressItem: async (table) => {
             await selectTable(table.name);
-        }, children: [_jsx(ListViewV2.Header, { variant: EVariantScreenHeader.FLAT_HEADER }), _jsx(ListViewV2.Content, { children: (table) => (_jsx(DatabaseInfoRow, { item: {
+        }, children: [_jsx(ListViewV2.Header, { variant: "default" }), _jsx(ListViewV2.Content, { children: (table) => (_jsx(DatabaseInfoRow, { item: {
                         name: table.displayName || table.name,
                         description: "Tabla de base de datos",
                         tableName: table.name,