@sincpro/mobile-ui 0.3.0 → 0.3.1

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,6 +32,8 @@ 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.Element;
 export declare function useListView<T>(): ListViewContextValue<T>;

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

@@ -15,12 +15,17 @@ 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>): React.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;
 }): React.JSX.Element;

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/widgets/GeoPermissionCard.d.ts

@@ -4,5 +4,10 @@ interface GeoPermissionCardProps {
     loading?: boolean;
     handleRequestPermission?: () => void;
 }
+/**
+ * @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/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 {
@@ -134,11 +135,7 @@ const JsonPreview = ({ selectedJson }) => {
         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/TimeZoneSelector.d.ts

@@ -3,5 +3,10 @@ interface TimeZoneSelectorProps {
     onSelect?: (tz: TimezoneLocale) => void;
     timezone?: string | null;
 }
+/**
+ * @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;
 }
+/**
+ * @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 };

package/dist/widgets/TimeZoneSelectorModal.js

@@ -15,11 +15,16 @@ const TIMEZONES_LOCALES = {
     japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
 };
 function TimezoneRow({ item, isSelected, onSelect, }) {
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 border-b border-gray-100 ${isSelected ? "bg-blue-50" : "bg-white"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: isSelected ? theme.info : 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-gray-400 text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-blue-500 items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 border-b border-border-light ${isSelected ? "bg-info-light" : "bg-white"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: isSelected ? theme.info : 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-info items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
 }
 function EmptyState() {
-    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-gray-500 text-center mt-4", children: "No se encontraron zonas horarias" })] }));
+    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" })] }));
 }
+/**
+ * @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.
+ */
 function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }) {
     const [query, setQuery] = useState("");
     const [selectedTimezone, setSelectedTimezone] = useState(currentTimezone || null);
@@ -52,6 +57,6 @@ function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, })
             onClose();
         }
     }
-    return (_jsxs(BottomSheet.Root, { onClose: onClose, size: "large", visible: visible, children: [_jsxs(BottomSheet.Header, { children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { bold: true, variant: "subtitle", children: "Zona Horaria" }), _jsx(Typography.Text, { className: "text-gray-500 text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-gray-100 px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, value: query }) })] }), _jsx(BottomSheet.Content, { scrollable: true, children: filteredTimezones.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(FlatList, { data: filteredTimezones, keyExtractor: (item) => item.timezone, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), scrollEnabled: false })) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", 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: "primary" }) }))] })] }));
+    return (_jsxs(BottomSheet.Root, { onClose: onClose, size: "large", visible: visible, children: [_jsxs(BottomSheet.Header, { children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { bold: true, variant: "subtitle", children: "Zona Horaria" }), _jsx(Typography.Text, { className: "text-text-secondary text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-bg-muted px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, value: query }) })] }), _jsx(BottomSheet.Content, { scrollable: true, children: filteredTimezones.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(FlatList, { data: filteredTimezones, keyExtractor: (item) => item.timezone, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), scrollEnabled: false })) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", 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: "primary" }) }))] })] }));
 }
 export { TimeZoneSelectorModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -47,9 +47,13 @@
   "author": "Gutierrez, Andres <andres.gutierrez@sincpro.com.bo>",
   "license": "MIT",
   "peerDependencies": {
+    "@expo-google-fonts/fira-code": "*",
+    "@expo-google-fonts/inter": "*",
     "@expo-google-fonts/montserrat": "*",
     "@expo/ui": "*",
     "@expo/vector-icons": "*",
+    "@react-native-community/datetimepicker": "*",
+    "@react-native-community/slider": "*",
     "expo-checkbox": "*",
     "expo-clipboard": "*",
     "expo-linear-gradient": "*",
@@ -63,9 +67,7 @@
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-worklets": "*",
-    "@react-native-community/slider": "*",
-    "@react-native-community/datetimepicker": "*"
+    "react-native-worklets": "*"
   },
   "peerDependenciesMeta": {
     "@expo/ui": {
@@ -80,10 +82,15 @@
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
+    "@expo-google-fonts/fira-code": "^0.4.1",
+    "@expo-google-fonts/inter": "^0.4.2",
     "@expo-google-fonts/montserrat": "^0.4.2",
+    "@expo/ui": "~56.0.18",
     "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "^5",
     "@react-native-async-storage/async-storage": "^2",
     "@react-native-community/datetimepicker": "9.1.0",
+    "@react-native-community/slider": "5.2.0",
     "@storybook/addon-ondevice-actions": "^10.4.6",
     "@storybook/addon-ondevice-controls": "^10.4.6",
     "@storybook/react-native": "^10.4.6",
@@ -119,9 +126,7 @@
     "storybook": "^10.4.6",
     "tailwindcss": "^3.4.17",
     "tsc-alias": "^1.8.17",
-    "typescript": "~6.0.3",
-    "@expo/ui": "~56.0.18",
-    "@react-native-community/slider": "5.2.0"
+    "typescript": "~6.0.3"
   },
   "scripts": {
     "start": "expo start",