@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/views/FormViewV2.d.ts

@@ -1,5 +1,5 @@
 import { EVariantScreenHeader } from "../widgets/ScreenHeader";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {
     name: string;
@@ -16,36 +16,37 @@ interface FormViewProps<T> {
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRetry, onBack, withContainer, children, }: FormViewProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Header({ variant, logoSource, children, }: {
+declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRetry, onBack, withContainer, children, }: FormViewProps<T>): React.JSX.Element;
+declare function Header({ children, }: {
+    /** @deprecated The header is now flat (Navigation.AppBar); `variant`/`logoSource` are ignored. */
     variant?: EVariantScreenHeader;
     logoSource?: ImageSourcePropType;
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function HeaderActions({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function HeaderActionsBar({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Content({ withMargin, children, }: {
     withMargin?: boolean;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Form({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Groups({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;
 declare function Group({ children, withMargin, elevation, }: {
     children: ReactNode;
     withMargin?: boolean;
     elevation?: "sm" | "md" | "lg";
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;
 export declare const FormViewV2: {
     Root: typeof FormViewRoot;
     Header: typeof Header & {

package/dist/views/FormViewV2.js

@@ -1,20 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import { ErrorBoundary, Feedback } from "../Feedback";
 import Container from "../layouts/Container";
+import { AppBar } from "../Navigation/Navigation.AppBar";
 import { theme } from "../theme";
 import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
-import ScreenHeader, { EVariantScreenHeader } from "../widgets/ScreenHeader";
 import React from "react";
 import { RefreshControl, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
-    const wrapperProps = withContainer ? {} : { style: { flex: 1 } };
+    // The header (AppBar) / parent layout owns the TOP safe-area; the inner Container only
+    // reserves the remaining edges to avoid stacking the top inset (double padding).
+    const wrapperProps = withContainer
+        ? { edges: ["bottom", "left", "right"] }
+        : { style: { flex: 1 } };
     return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
 }
-function Header({ variant = EVariantScreenHeader.FLAT_HEADER, logoSource, children, }) {
+function Header({ children, }) {
     const { name, description, onBack } = useFormView();
-    return (_jsx(_Fragment, { children: _jsx(ScreenHeader, { logoSource: logoSource, onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }) }));
+    return (_jsx(AppBar, { onBack: onBack, safeArea: false, subheader: children, subtitle: description ? description : `Seleccionar ${name}`, title: name }));
 }
 function HeaderActions({ children }) {
     return (_jsx(View, { className: "flex-row px-4 my-4 items-center justify-between flex-1 gap-2", children: children }));

package/dist/views/ListViewV2.context.d.ts

@@ -15,8 +15,10 @@ interface ListViewContextValue<T> {
     onDeleteItem?: (item: T) => void;
     onSearch?: (query: string) => void;
     onBack?: () => void;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
 }
-export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, children, }: {
+export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, children, }: {
     name: string;
     description?: string;
     items: T[];
@@ -30,7 +32,9 @@ export declare function ListViewProvider<T>({ name, description, items, isLoadin
     onDeleteItem?: (item: T) => void;
     onSearch?: (query: string) => void;
     onBack?: () => void;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useListView<T>(): ListViewContextValue<T>;
 export {};

package/dist/views/ListViewV2.context.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { createContext, useContext, useState } from "react";
 const Context = createContext(null);
-export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, children, }) {
+export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, children, }) {
     const [showRefreshing, setShowRefreshing] = useState(false);
     return (_jsx(Context.Provider, { value: {
             name,
@@ -19,6 +19,8 @@ export function ListViewProvider({ name, description, items, isLoading = false,
             onDeleteItem,
             onSearch,
             onBack,
+            onLoadMore,
+            loadingMore,
         }, children: children }));
 }
 export function useListView() {

package/dist/views/ListViewV2.d.ts

@@ -1,5 +1,5 @@
 import { EVariantScreenHeader } from "../widgets/ScreenHeader";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
     name: string;
@@ -15,47 +15,52 @@ interface ListViewProps<T> {
     onDeleteItem?: (item: T) => void;
     onSearch?: (query: string) => void;
     onBack?: () => void;
+    /** Called when the list nears the end — wire to fetch the next page. */
+    onLoadMore?: () => void;
+    /** Show a footer spinner while the next page loads. */
+    loadingMore?: boolean;
     backgroundColor?: string;
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer, children, }: ListViewProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Header({ variant, children, }: {
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
+declare function Header({ children, }: {
+    /** @deprecated The header is now flat (Navigation.AppBar); `variant` is ignored. */
     variant?: EVariantScreenHeader;
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function HeaderSearch({ searchQuery }: {
     searchQuery?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;
 declare function HeaderActions({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function HeaderFilters({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 interface FilterChipProps {
     label: string;
     active?: boolean;
     onPress: () => void;
 }
-declare function FilterChip({ label, active, onPress }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterChip({ label, active, onPress }: FilterChipProps): React.JSX.Element;
 declare function FilterChips({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Content({ children, withMargin, }: {
     children?: (item: any) => ReactNode;
     withMargin?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function ContentList({ children, contentWithMargin, }: {
     children?: (item: any) => ReactNode;
     contentWithMargin: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;
 declare function FloatingButton({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 interface RowRootProps {
     children: ReactNode;
     onPress?: () => void;
@@ -64,45 +69,45 @@ interface RowRootProps {
     style?: StyleProp<ViewStyle>;
     backgroundColor?: string;
 }
-declare function RowRoot({ children, onPress, onLongPress, showDivider, style, backgroundColor, }: RowRootProps): import("react/jsx-runtime").JSX.Element;
+declare function RowRoot({ children, onPress, onLongPress, showDivider, style, backgroundColor, }: RowRootProps): React.JSX.Element;
 interface RowAvatarProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowAvatar({ children, style }: RowAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function RowAvatar({ children, style }: RowAvatarProps): React.JSX.Element;
 interface RowContentProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowContent({ children, style }: RowContentProps): import("react/jsx-runtime").JSX.Element;
+declare function RowContent({ children, style }: RowContentProps): React.JSX.Element;
 interface RowTitleProps {
     children: ReactNode;
     badge?: ReactNode;
     rightComponent?: ReactNode;
     numberOfLines?: number;
 }
-declare function RowTitle({ children, badge, rightComponent, numberOfLines }: RowTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function RowTitle({ children, badge, rightComponent, numberOfLines }: RowTitleProps): React.JSX.Element;
 interface RowSubtitleProps {
     children: ReactNode;
     className?: string;
 }
-declare function RowSubtitle({ children, className }: RowSubtitleProps): import("react/jsx-runtime").JSX.Element;
+declare function RowSubtitle({ children, className }: RowSubtitleProps): React.JSX.Element;
 interface RowFooterProps {
     left?: ReactNode;
     right?: ReactNode;
     children?: ReactNode;
 }
-declare function RowFooter({ left, right, children }: RowFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function RowFooter({ left, right, children }: RowFooterProps): React.JSX.Element;
 interface RowActionsProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowActions({ children, style }: RowActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function RowActions({ children, style }: RowActionsProps): React.JSX.Element;
 interface RowActionButtonProps {
     icon: ReactNode;
     onPress?: () => void;
 }
-declare function RowActionButton({ icon, onPress }: RowActionButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function RowActionButton({ icon, onPress }: RowActionButtonProps): React.JSX.Element;
 export declare const ListViewV2: {
     Root: typeof ListViewRoot;
     Header: typeof Header & {

package/dist/views/ListViewV2.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import { ErrorBoundary, Feedback } from "../Feedback";
-import { Form } from "../Form";
 import Container from "../layouts/Container";
 import { Navigation } from "../Navigation";
 import { theme } from "../theme";
@@ -9,20 +8,21 @@ import { cn, tv } from "../theme/tw";
 import { Typography } from "../Typography";
 import { ListViewProvider, useListView } from "../views/ListViewV2.context";
 import { toRowItems } from "../views/types/IListView";
-import ScreenHeader, { EVariantScreenHeader } from "../widgets/ScreenHeader";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
-function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer = true, children, }) {
+function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, backgroundColor, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
+    // The header (AppBar) / parent layout owns the TOP safe-area; the Container only reserves
+    // the remaining edges to avoid stacking the top inset (double padding).
     const wrapperProps = withContainer
-        ? {} // Container maneja su propio backgroundColor
+        ? { edges: ["bottom", "left", "right"] }
         : { className: "flex-1 bg-bg-page" };
     // Propagate contentWithMargin to ContentList via context
-    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isLoading: isLoading, items: items, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isLoading: isLoading, items: items, loadingMore: loadingMore, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onLoadMore: onLoadMore, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
 }
-function Header({ variant = EVariantScreenHeader.ROUNDED_HEADER, children, }) {
+function Header({ children, }) {
     const { name, description, onBack } = useListView();
-    return (_jsx(ScreenHeader, { onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }));
+    return (_jsx(Navigation.AppBar, { onBack: onBack, safeArea: false, subheader: children, subtitle: description ? description : `Seleccionar ${name}`, title: name }));
 }
 function HeaderSearch({ searchQuery = "" }) {
     const { name, onSearch } = useListView();
@@ -42,7 +42,7 @@ function HeaderSearch({ searchQuery = "" }) {
     if (!onSearch) {
         return null;
     }
-    return (_jsx(View, { className: "px-4 pb-3 mt-2", children: _jsx(Form.SearchBar, { onChangeText: setQuery, placeholder: `Buscar ${name}`, value: query }) }));
+    return (_jsx(View, { className: "pb-2", children: _jsx(Navigation.SearchBar, { onChangeText: setQuery, placeholder: `Buscar ${name}`, value: query }) }));
 }
 function HeaderActions({ children }) {
     return (_jsx(View, { className: "flex-row px-4 my-3 items-center justify-between flex-1 gap-2", children: children }));
@@ -50,12 +50,13 @@ function HeaderActions({ children }) {
 function HeaderFilters({ children }) {
     return _jsx(View, { className: "px-4 py-2 items-center", children: children });
 }
+// Modern filter pills (2026): rounded-full, active = accent (green), inactive = muted track.
 const filterChip = tv({
-    base: "py-[5px] px-2.5 items-center justify-center rounded-md",
+    base: "py-1.5 px-3.5 items-center justify-center rounded-full",
     variants: {
         active: {
-            true: "bg-primary",
-            false: "bg-transparent",
+            true: "bg-accent",
+            false: "bg-bg-muted",
         },
     },
     defaultVariants: { active: false },
@@ -63,20 +64,17 @@ const filterChip = tv({
 const filterChipText = tv({
     variants: {
         active: {
-            true: "text-text-on-primary font-semibold",
+            true: "text-text-inverse font-semibold",
             false: "text-text-secondary",
         },
     },
     defaultVariants: { active: false },
 });
 function FilterChip({ label, active = false, onPress }) {
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: filterChip({ active }), onPress: onPress, children: _jsxs(Typography.Text, { className: filterChipText({ active }), variant: "bodySmall", children: [active ? "• " : "", label] }) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: filterChip({ active }), onPress: onPress, children: _jsx(Typography.Text, { className: filterChipText({ active }), variant: "bodySmall", children: label }) }));
 }
 function FilterChips({ children }) {
-    const childArray = React.Children.toArray(children);
-    return (_jsx(ScrollView, { contentContainerStyle: {
-            paddingHorizontal: 16,
-        }, horizontal: true, showsHorizontalScrollIndicator: false, style: { flexGrow: 0 }, children: _jsx(View, { className: "flex-row bg-bg-card rounded-[10px] border-[1.5px] border-border-default self-center shadow-sm overflow-hidden", children: childArray.map((child, index) => (_jsxs(View, { className: "flex-row items-center", children: [child, index < childArray.length - 1 && (_jsx(View, { className: "w-[1.5px] h-[22px] bg-border-divider opacity-50 my-0.5" }))] }, index))) }) }));
+    return (_jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, gap: 8 }, horizontal: true, showsHorizontalScrollIndicator: false, style: { flexGrow: 0 }, children: children }));
 }
 function Content({ children, withMargin = true, }) {
     const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
@@ -107,7 +105,7 @@ function Content({ children, withMargin = true, }) {
     return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentWithMargin: withMargin, children: children })] }));
 }
 function ContentList({ children, contentWithMargin, }) {
-    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, } = useListView();
+    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, } = useListView();
     const rowItems = useMemo(() => toRowItems(items), [items]);
     const handleRefresh = useCallback(async () => {
         setShowRefreshing(true);
@@ -129,7 +127,7 @@ function ContentList({ children, contentWithMargin, }) {
             flex: 1,
             marginTop: 2,
             paddingHorizontal: contentWithMargin ? 4 : 0,
-        }, children: _jsx(FlatList, { data: rowItems, keyExtractor: (item) => String(item.index), refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
+        }, children: _jsx(FlatList, { data: rowItems, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : null, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
 }
 function Footer({ children }) {
     const { items } = useListView();

package/dist/views/Wizard/Wizard.context.d.ts

@@ -22,5 +22,5 @@ export interface WizardProviderProps {
     isLoading?: boolean;
     loadingMessage?: string;
 }
-export declare function WizardProvider({ children, initialStep, steps, onComplete, onCancel, isLoading, loadingMessage, }: WizardProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function WizardProvider({ children, initialStep, steps, onComplete, onCancel, isLoading, loadingMessage, }: WizardProviderProps): import("react").JSX.Element;
 export declare function useWizard(): WizardContextValue;

package/dist/widgets/CircleButton.d.ts

@@ -1,5 +1,5 @@
 import { IconType } from "../utils/icon";
-import { ComponentType } from "react";
+import React, { ComponentType } from "react";
 interface CircleButtonProps {
     iconType?: IconType;
     size?: "sm" | "md" | "lg";
@@ -11,5 +11,9 @@ interface CircleButtonProps {
         color?: string;
     }>;
 }
-export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Duplicates the icon-button. Use `Form.IconButton` (general) or
+ * `Navigation.AppBar.Action` (headers). Kept for backwards compatibility.
+ */
+export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): React.JSX.Element;
 export {};

package/dist/widgets/CircleButton.js

@@ -31,6 +31,10 @@ const SIZE_MAP = {
     md: { container: 60, icon: 30 },
     lg: { container: 80, icon: 40 },
 };
+/**
+ * @deprecated Duplicates the icon-button. Use `Form.IconButton` (general) or
+ * `Navigation.AppBar.Action` (headers). Kept for backwards compatibility.
+ */
 export function CircleButton({ iconType = "ionicons", size = "md", color = theme.text.inverse, variant = "accent", className, customIcon, }) {
     const iconSize = SIZE_MAP[size].icon;
     return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Display.Icon, { color: color, customIcon: customIcon, size: iconSize, type: iconType }) }));

package/dist/widgets/GeoPermissionCard.d.ts

@@ -4,5 +4,10 @@ interface GeoPermissionCardProps {
     loading?: boolean;
     handleRequestPermission?: () => void;
 }
-declare function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }: GeoPermissionCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Domain-coupled (geo permission + Spanish copy); relocated to the core.
+ * Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
+ * backwards compatibility and removed in the next major.
+ */
+declare function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }: GeoPermissionCardProps): import("react").JSX.Element;
 export default GeoPermissionCard;

package/dist/widgets/GeoPermissionCard.js

@@ -7,13 +7,18 @@ import { tv } from "tailwind-variants";
 const statusTextVariants = tv({
     variants: {
         granted: {
-            true: "text-green-600",
-            false: "text-red-500",
+            true: "text-success",
+            false: "text-danger",
         },
     },
 });
+/**
+ * @deprecated Domain-coupled (geo permission + Spanish copy); relocated to the core.
+ * Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
+ * backwards compatibility and removed in the next major.
+ */
 function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }) {
     const granted = hasPermission !== undefined ? hasPermission : false;
-    return (_jsx(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 ? 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" }))] })] }) }));
+    return (_jsx(View, { className: "bg-bg-muted rounded-xl p-5 my-2.5 shadow-sm", 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" }))] })] }) }));
 }
 export default GeoPermissionCard;

package/dist/widgets/HomeHeader.d.ts

@@ -7,5 +7,9 @@ interface HomeHeaderProps {
     readonly backButton?: boolean;
     readonly onBack?: () => void;
 }
+/**
+ * @deprecated Legacy style (gradient). For new top bars use `Navigation.AppBar`.
+ * Kept for backwards compatibility.
+ */
 export declare const HomeHeader: React.FC<HomeHeaderProps>;
 export {};

package/dist/widgets/HomeHeader.js

@@ -3,6 +3,10 @@ import { Display, Typography } from "../index";
 import GradientContainer from "../layouts/GradientContainer";
 import { theme } from "../theme";
 import { TouchableOpacity, View } from "react-native";
+/**
+ * @deprecated Legacy style (gradient). For new top bars use `Navigation.AppBar`.
+ * Kept for backwards compatibility.
+ */
 export const HomeHeader = ({ title = "Distribución", logo, logoSource, backButton = false, onBack, }) => {
     const handleBackPress = onBack ?? (() => { });
     return (_jsx(GradientContainer, { className: "pt-10 pb-4 px-4", children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-text-inverse p-1.5 rounded", onPress: handleBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Display.Logo, { size: "medium", source: logoSource }), !!title && (_jsx(Typography.Text, { className: "text-text-inverse", variant: "h4", children: title }))] })] }) }));

package/dist/widgets/JSONViewer.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 declare const JsonPreview: ({ selectedJson }: {
     selectedJson: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default JsonPreview;

package/dist/widgets/JSONViewer.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { ThemedActivityIndicator } from "../theme";
+import { fontFamilies } from "../theme/typography";
 import { useMemo, useState } from "react";
-import { Platform, Text, View } from "react-native";
+import { Text, View } from "react-native";
 const parseDeepJson = (value) => {
     if (typeof value === "string") {
         try {
@@ -35,7 +36,7 @@ const JSON_COLORS = {
 const MAX_JSON_SIZE = 500_000; // 500KB límite
 const MAX_LINES = 500; // Máximo 500 líneas con colores
 function parseJsonToColoredLines(jsonString) {
-    // Protección 1: Verificar tamaño
+    // Guard 1: check size
     if (jsonString.length > MAX_JSON_SIZE) {
         return [
             {
@@ -47,7 +48,7 @@ function parseJsonToColoredLines(jsonString) {
         ];
     }
     const lines = jsonString.split("\n");
-    // Protección 2: Verificar cantidad de líneas
+    // Guard 2: check line count
     if (lines.length > MAX_LINES) {
         return [
             {
@@ -98,7 +99,7 @@ function parseJsonToColoredLines(jsonString) {
 }
 const JsonPreview = ({ selectedJson }) => {
     const [isProcessing, setIsProcessing] = useState(false);
-    // Protección 3: Formatear con try-catch robusto
+    // Guard 3: format with a robust try-catch
     const formattedJson = useMemo(() => {
         if (!selectedJson || selectedJson.trim() === "") {
             return "{}";
@@ -113,7 +114,7 @@ const JsonPreview = ({ selectedJson }) => {
             return selectedJson; // Mostrar original si falla
         }
     }, [selectedJson]);
-    // Protección 4: Colorear con control de procesamiento
+    // Guard 4: colorize with processing control
     const coloredLines = useMemo(() => {
         setIsProcessing(true);
         try {
@@ -125,20 +126,16 @@ const JsonPreview = ({ selectedJson }) => {
             return [{ text: formattedJson, color: "#333333" }];
         }
         finally {
-            // Pequeño delay para que el loading sea visible si es necesario
+            // Small delay so the loading state is visible if needed
             setTimeout(() => setIsProcessing(false), 50);
         }
     }, [formattedJson]);
-    // Protección 5: Mostrar loading mientras procesa JSONs grandes
+    // Guard 5: show loading while processing large JSON
     if (isProcessing && formattedJson.length > 50_000) {
         return (_jsxs(View, { className: "p-4 items-center justify-center min-h-[200px]", children: [_jsx(ThemedActivityIndicator, { size: "large" }), _jsx(Text, { className: "mt-2 text-text-secondary text-sm", children: "Procesando JSON..." })] }));
     }
     return (_jsx(View, { className: "p-4", children: _jsx(Text, { selectable: true, style: {
-                fontFamily: Platform.select({
-                    ios: "Courier",
-                    android: "monospace",
-                    default: "Courier",
-                }),
+                fontFamily: fontFamilies.mono,
                 fontSize: 13,
                 lineHeight: 18,
             }, children: coloredLines.map((line, index) => (_jsx(Text, { style: { color: line.color }, children: line.text }, index))) }) }));

package/dist/widgets/MenuCard.d.ts

@@ -9,5 +9,5 @@ interface MenuCardProps {
         color?: string;
     }>;
 }
-export declare function MenuCard({ title, iconType, onPress, customIcon, }: MenuCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuCard({ title, iconType, onPress, customIcon, }: MenuCardProps): import("react").JSX.Element;
 export {};

package/dist/widgets/ScreenHeader.d.ts

@@ -17,5 +17,9 @@ interface ScreenHeaderProps {
     withGradientContainer?: boolean;
     onBack?: () => void;
 }
-declare function ScreenHeader({ variant, title, subtitle, logoSource, onBack, children, }: ScreenHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @deprecated Legacy style (gradient variants). For new top bars use
+ * `Navigation.AppBar` (flat). Kept for backwards compatibility (used by FormViewV2/ListViewV2).
+ */
+declare function ScreenHeader({ variant, title, subtitle, logoSource, onBack, children, }: ScreenHeaderProps): import("react").JSX.Element | null;
 export default ScreenHeader;

package/dist/widgets/ScreenHeader.js

@@ -11,6 +11,10 @@ export var EVariantScreenHeader;
     EVariantScreenHeader["LOGO_WITH_BACK_BUTTON"] = "LOGO_WITH_BACK_BUTTON";
     EVariantScreenHeader["ONLY_LOGO"] = "ONLY_LOGO";
 })(EVariantScreenHeader || (EVariantScreenHeader = {}));
+/**
+ * @deprecated Legacy style (gradient variants). For new top bars use
+ * `Navigation.AppBar` (flat). Kept for backwards compatibility (used by FormViewV2/ListViewV2).
+ */
 function ScreenHeader({ variant, title = "Distribución", subtitle, logoSource, onBack, children, }) {
     switch (variant) {
         case EVariantScreenHeader.FLAT_HEADER:

package/dist/widgets/TimeZoneSelector.d.ts

@@ -3,5 +3,10 @@ interface TimeZoneSelectorProps {
     onSelect?: (tz: TimezoneLocale) => void;
     timezone?: string | null;
 }
-export declare function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Domain/region-coupled (hardcoded LatAm timezones + Spanish copy); relocated
+ * to the core. Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
+ * backwards compatibility and removed in the next major.
+ */
+export declare function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps): import("react").JSX.Element;
 export {};

package/dist/widgets/TimeZoneSelector.js

@@ -5,6 +5,11 @@ import { Typography } from "../Typography";
 import { TimeZoneSelectorModal } from "../widgets/TimeZoneSelectorModal";
 import { useState } from "react";
 import { View } from "react-native";
+/**
+ * @deprecated Domain/region-coupled (hardcoded LatAm timezones + Spanish copy); relocated
+ * to the core. Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
+ * backwards compatibility and removed in the next major.
+ */
 export function TimeZoneSelector({ onSelect, timezone }) {
     const [currentTimezone, setCurrentTimezone] = useState(timezone);
     const [selectorVisible, setSelectorVisible] = useState(false);
@@ -15,5 +20,5 @@ export function TimeZoneSelector({ onSelect, timezone }) {
     const displayTimezone = currentTimezone
         ? currentTimezone.replace(/_/g, " ").replace("America/", "")
         : "No configurada";
-    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: 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-white rounded-lg p-3", children: [_jsx(Typography.Text, { className: "text-gray-700", semibold: true, children: displayTimezone }), _jsx(Typography.Text, { className: "text-gray-400 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-gray-500 mb-2", children: "Selecciona una zona horaria" }), _jsx(Form.Button, { onPress: () => setSelectorVisible(true), size: "small", title: "Seleccionar Zona Horaria" })] }))] })] }), _jsx(TimeZoneSelectorModal, { currentTimezone: currentTimezone, onClose: () => setSelectorVisible(false), onSelect: handleTimezoneSelected, visible: selectorVisible })] }));
+    return (_jsxs(View, { className: "bg-bg-muted rounded-xl p-5 my-2.5 shadow-sm", 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-white 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" })] }))] })] }), _jsx(TimeZoneSelectorModal, { currentTimezone: currentTimezone, onClose: () => setSelectorVisible(false), onSelect: handleTimezoneSelected, visible: selectorVisible })] }));
 }

package/dist/widgets/TimeZoneSelectorModal.d.ts

@@ -5,5 +5,10 @@ interface TimeZoneSelectorModalProps {
     onSelect: (tz: TimezoneLocale) => void;
     currentTimezone?: string | null;
 }
-declare function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }: TimeZoneSelectorModalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Domain/region-coupled (hardcoded LatAm timezones + Spanish copy); relocated
+ * to the core. Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
+ * backwards compatibility and removed in the next major.
+ */
+declare function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }: TimeZoneSelectorModalProps): import("react").JSX.Element;
 export { TimeZoneSelectorModal };