@sincpro/mobile 0.1.1 → 0.3.1

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

@@ -2,41 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { EEventStatus } from "../../../domain/event_sourcing";
 import { Display } from "@sincpro/mobile-ui/Display";
 import CopyableText from "@sincpro/mobile-ui/Display/Display.CopyableText";
-import { theme } from "@sincpro/mobile-ui/theme";
+import { useTheme } from "@sincpro/mobile-ui/theme";
 import { Typography } from "@sincpro/mobile-ui/Typography";
 import JsonPreview from "@sincpro/mobile-ui/widgets/JSONViewer";
 import { useState } from "react";
 import { TouchableOpacity, View } from "react-native";
-const statusColorMap = {
-    [EEventStatus.ACKNOWLEDGED]: {
-        bg: "bg-emerald-600",
-        color: theme.success,
-        light: `${theme.success}4D`,
-    },
-    [EEventStatus.PENDING]: {
-        bg: "bg-amber-500",
-        color: theme.warning,
-        light: `${theme.warning}4D`,
-    },
-    [EEventStatus.PROCESSING]: {
-        bg: "bg-accent",
-        color: theme.warning,
-        light: `${theme.warning}4D`,
-    },
-    [EEventStatus.FAILED]: {
-        bg: "bg-red-500",
-        color: theme.danger,
-        light: `${theme.danger}4D`,
-    },
-};
-const defaultStatus = {
-    bg: "bg-gray-500",
-    color: theme.text.secondary,
-    light: `${theme.text.secondary}4D`,
-};
-function getStatusColor(status) {
-    return statusColorMap[status] ?? defaultStatus;
-}
 function getStatusIcon(status) {
     switch (status) {
         case EEventStatus.ACKNOWLEDGED:
@@ -57,9 +27,37 @@ function formatEventName(name) {
 }
 function EventTimelineItem({ event, isLast = false }) {
     const [expanded, setExpanded] = useState(false);
-    const statusInfo = getStatusColor(event.status);
+    const theme = useTheme();
+    const statusColorMap = {
+        [EEventStatus.ACKNOWLEDGED]: {
+            bg: "bg-success",
+            color: theme.success,
+            light: `${theme.success}4D`,
+        },
+        [EEventStatus.PENDING]: {
+            bg: "bg-warning",
+            color: theme.warning,
+            light: `${theme.warning}4D`,
+        },
+        [EEventStatus.PROCESSING]: {
+            bg: "bg-accent",
+            color: theme.warning,
+            light: `${theme.warning}4D`,
+        },
+        [EEventStatus.FAILED]: {
+            bg: "bg-danger",
+            color: theme.danger,
+            light: `${theme.danger}4D`,
+        },
+    };
+    const defaultStatus = {
+        bg: "bg-text-tertiary",
+        color: theme.text.secondary,
+        light: `${theme.text.secondary}4D`,
+    };
+    const statusInfo = statusColorMap[event.status] ?? defaultStatus;
     const statusIcon = getStatusIcon(event.status);
     const friendlyName = formatEventName(event.name);
-    return (_jsxs(View, { className: "flex-row px-4", children: [_jsxs(View, { className: "items-center w-8 mr-3", children: [_jsx(View, { className: `w-6 h-6 rounded-full items-center justify-center ${statusInfo.bg}`, children: _jsx(Display.Icon, { color: "#ffffff", name: statusIcon, size: 12, type: "feather" }) }), !isLast && (_jsx(View, { className: "w-0.5 flex-1 mt-1", style: { backgroundColor: statusInfo.light } }))] }), _jsxs(TouchableOpacity, { activeOpacity: 0.7, className: "flex-1 bg-white rounded-xl p-3 mb-3 border border-gray-100 shadow-sm", onPress: () => setExpanded(!expanded), children: [_jsxs(View, { className: "flex-row justify-between items-center mb-2", children: [_jsx(Typography.Text, { semibold: true, variant: "body", children: friendlyName }), _jsx(Display.Icon, { color: theme.text.secondary, name: expanded ? "chevron-up" : "chevron-down", size: 16, type: "feather" })] }), _jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: theme.text.secondary, name: "clock", size: 12, type: "feather" }), _jsx(Display.Date, { className: "text-text-tertiary", showTime: true, textVariant: "caption", value: event.createdAt })] }), _jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: statusInfo.color, name: statusIcon, size: 12, type: "feather" }), _jsxs(Typography.Text, { style: { color: statusInfo.color }, variant: "caption", children: [event.status, " \u2022 Intentos: ", event.attempts] })] }), (event.sequence ?? 0) > 0 && (_jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: theme.text.secondary, name: "hash", size: 12, type: "feather" }), _jsxs(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: ["Secuencia: ", event.sequence] })] })), expanded && event && (_jsxs(View, { className: "mt-3 border-t border-gray-100 pt-3", children: [_jsxs(View, { className: "flex-row justify-between items-center mb-2", children: [_jsx(Typography.Text, { className: "text-text-tertiary", semibold: true, variant: "caption", children: "Payload" }), _jsx(CopyableText, { className: "text-primary text-xs", getValue: () => event.asJSON(true), label: "copy" })] }), _jsx(View, { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: _jsx(JsonPreview, { selectedJson: event.asJSON(true) }) })] }))] })] }));
+    return (_jsxs(View, { className: "flex-row px-4", children: [_jsxs(View, { className: "items-center w-8 mr-3", children: [_jsx(View, { className: `w-6 h-6 rounded-full items-center justify-center ${statusInfo.bg}`, children: _jsx(Display.Icon, { color: "#ffffff", name: statusIcon, size: 12, type: "feather" }) }), !isLast && (_jsx(View, { className: "w-0.5 flex-1 mt-1", style: { backgroundColor: statusInfo.light } }))] }), _jsxs(TouchableOpacity, { activeOpacity: 0.7, className: "flex-1 bg-bg-card rounded-xl p-3 mb-3 border border-border-light shadow-sm", onPress: () => setExpanded(!expanded), children: [_jsxs(View, { className: "flex-row justify-between items-center mb-2", children: [_jsx(Typography.Text, { semibold: true, variant: "body", children: friendlyName }), _jsx(Display.Icon, { color: theme.text.secondary, name: expanded ? "chevron-up" : "chevron-down", size: 16, type: "feather" })] }), _jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: theme.text.secondary, name: "clock", size: 12, type: "feather" }), _jsx(Display.Date, { className: "text-text-tertiary", showTime: true, textVariant: "caption", value: event.createdAt })] }), _jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: statusInfo.color, name: statusIcon, size: 12, type: "feather" }), _jsxs(Typography.Text, { style: { color: statusInfo.color }, variant: "caption", children: [event.status, " \u2022 Intentos: ", event.attempts] })] }), (event.sequence ?? 0) > 0 && (_jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: theme.text.secondary, name: "hash", size: 12, type: "feather" }), _jsxs(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: ["Secuencia: ", event.sequence] })] })), expanded && event && (_jsxs(View, { className: "mt-3 border-t border-border-light pt-3", children: [_jsxs(View, { className: "flex-row justify-between items-center mb-2", children: [_jsx(Typography.Text, { className: "text-text-tertiary", semibold: true, variant: "caption", children: "Payload" }), _jsx(CopyableText, { className: "text-primary text-xs", getValue: () => event.asJSON(true), label: "copy" })] }), _jsx(View, { className: "bg-bg-muted rounded-lg border border-border-default overflow-hidden", children: _jsx(JsonPreview, { selectedJson: event.asJSON(true) }) })] }))] })] }));
 }
 export default EventTimelineItem;

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

@@ -0,0 +1,8 @@
+interface GeoPermissionCardProps {
+    title: string;
+    hasPermission?: boolean;
+    loading?: boolean;
+    handleRequestPermission?: () => void;
+}
+declare function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }: GeoPermissionCardProps): import("react/jsx-runtime").JSX.Element;
+export default GeoPermissionCard;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+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 { View } from "react-native";
+import { tv } from "tailwind-variants";
+const statusTextVariants = tv({
+    variants: {
+        granted: {
+            true: "text-success",
+            false: "text-danger",
+        },
+    },
+});
+function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }) {
+    const theme = useTheme();
+    const granted = hasPermission !== undefined ? hasPermission : false;
+    return (_jsx(Display.Card, { className: "my-2.5", children: _jsxs(View, { className: "flex-row items-start", children: [_jsx(Display.Icon, { color: granted ? theme.success : theme.danger, name: granted ? "check-circle" : "location-off", size: 35, type: "material" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: title }), _jsx(Typography.Text, { className: statusTextVariants({ granted }), children: granted ? "Permiso activo." : "Permiso inactivo." }), !granted && (_jsx(Form.Button, { loading: loading, onPress: handleRequestPermission, size: "small", title: "Abrir Configuración", variant: "cta" }))] })] }) }));
+}
+export default GeoPermissionCard;

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

@@ -1,5 +1,8 @@
-interface Props {
-    position?: "top" | "bottom";
-}
-declare function ProcessToast({ position }: Props): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * 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.
+ */
+declare function ProcessToast(): null;
 export default ProcessToast;

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;