@sincpro/mobile-ui 0.5.0 → 0.6.0

package/dist/primitives/BaseButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import Icon from "../Display/Display.Icon";
 import { theme } from "../theme";
 import { tv } from "../theme/tw";
 import { Typography } from "../Typography";
@@ -222,9 +222,9 @@ export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "med
         return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
                 borderRadius: 8,
                 opacity: disabled ? 0.7 : 1,
-            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
+            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
     }
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 // ============================================================================
 // COMPOUND COMPONENT

package/dist/theme/default.js

@@ -4,7 +4,7 @@ export const DEFAULT_THEME = {
     secondary: "#64748B",
     accent: "#F59E0B",
     bg: {
-        page: "#F9FAFB",
+        page: "#F0F1F3",
         card: "#FFFFFF",
         popover: "#FFFFFF",
         muted: "#F3F4F6",

package/dist/views/FormViewV2.d.ts

@@ -1,3 +1,4 @@
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
 import React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
@@ -26,10 +27,20 @@ interface HeaderProps {
     actions?: ReactNode;
     /** Subheader content rendered below the title bar (SearchBar, SegmentedControl, etc.). */
     children?: ReactNode;
+    /**
+     * [large variant] Extra top padding (px) above the title.
+     * Use ~16 on root screens (no back button) for more breathing room.
+     */
+    topSpacing?: number;
+    /**
+     * Gradient + texture surface. Automatically activates white text/icons — no need to set `tone="dark"`.
+     * See `AppBarBackground` for the full shape.
+     */
+    background?: AppBarBackground;
     /** @deprecated Pass `variant` prop instead. */
     logoSource?: ImageSourcePropType;
 }
-declare function Header({ variant, tone, actions, children }: HeaderProps): React.JSX.Element;
+declare function Header({ variant, tone, actions, children, topSpacing, background, }: HeaderProps): React.JSX.Element;
 declare function HeaderActions({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
@@ -94,14 +105,15 @@ declare function Group({ children, withMargin, elevation, padding, variant, titl
     title?: string;
 }): React.JSX.Element;
 /**
- * Settings-style section: SectionHeader label + Card(padding="none") wrapper.
- * Use inside FormViewV2.Content for preference/config screens where rows are
- * Display.ListItem or Display.MenuButton (not form inputs).
+ * Settings-style section: titled card grouping Display.MenuButton rows.
+ * Delegates to the standalone `MenuSection` widget — single source of truth
+ * for this pattern whether used inside a FormView or on a standalone screen.
  */
-declare function Section({ title, children, withMargin, }: {
+declare function Section({ title, footer, children, }: {
     title?: string;
+    /** Hint text rendered below the card (e.g. "Toca para cambiar la configuración"). */
+    footer?: string;
     children: ReactNode;
-    withMargin?: boolean;
 }): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;

package/dist/views/FormViewV2.js

@@ -1,26 +1,26 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import { ErrorBoundary, Feedback } from "../Feedback";
+import { useBottomInset } from "../layouts/BottomInset";
 import Container from "../layouts/Container";
 import { AppBar } from "../Navigation/Navigation.AppBar";
+import { MenuSection } from "../Navigation/Navigation.MenuSection";
 import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { theme } from "../theme";
+import { useTheme } from "../theme";
 import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
 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;
-    // 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 = "default", tone, actions, children }) {
+function Header({ variant = "default", tone, actions, children, topSpacing, background, }) {
     const { name, description, onBack } = useFormView();
-    return (_jsx(AppBar, { actions: actions, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, variant: variant }));
+    return (_jsx(AppBar, { actions: actions, background: background, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, topSpacing: topSpacing, variant: variant }));
 }
 function HeaderActions({ children }) {
     return (_jsx(View, { className: "flex-row px-4 my-2 items-center justify-between flex-1 gap-2", children: children }));
@@ -38,6 +38,8 @@ function HeaderSegmented(props) {
 }
 function Content({ withMargin = false, children, }) {
     const { name, isLoading, isEmpty, hasError, errorMessage, item, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useFormView();
+    const bottomInset = useBottomInset();
+    const theme = useTheme();
     const handleRefresh = React.useCallback(async () => {
         setShowRefreshing(true);
         if (onRefresh) {
@@ -50,7 +52,8 @@ function Content({ withMargin = false, children, }) {
             flexGrow: 1,
             justifyContent: isCenteredContent ? "center" : "flex-start",
             alignItems: isCenteredContent ? "center" : "stretch",
-        }, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { flex: 1 }, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
+            paddingBottom: bottomInset,
+        }, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { flex: 1, backgroundColor: theme.bg.page }, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
 }
 /**
  * @deprecated Content already handles isEmpty/!item by rendering Feedback.Empty internally.
@@ -91,12 +94,12 @@ function Group({ children, withMargin = true, elevation = "none", padding = "md"
     return (_jsxs(_Fragment, { children: [header, body] }));
 }
 /**
- * Settings-style section: SectionHeader label + Card(padding="none") wrapper.
- * Use inside FormViewV2.Content for preference/config screens where rows are
- * Display.ListItem or Display.MenuButton (not form inputs).
+ * Settings-style section: titled card grouping Display.MenuButton rows.
+ * Delegates to the standalone `MenuSection` widget — single source of truth
+ * for this pattern whether used inside a FormView or on a standalone screen.
  */
-function Section({ title, children, withMargin = true, }) {
-    return (_jsxs(View, { style: withMargin ? { marginHorizontal: 16 } : undefined, children: [title ? _jsx(Display.SectionHeader, { title: title }) : null, _jsx(Display.Card, { padding: "none", children: children })] }));
+function Section({ title, footer, children, }) {
+    return (_jsx(MenuSection, { footer: footer, title: title, children: children }));
 }
 function Footer({ children }) {
     const { isEmpty, isLoading } = useFormView();

package/dist/views/ListViewV2.d.ts

@@ -1,4 +1,5 @@
 import { type SearchHistoryProps } from "../Display/Display.SearchHistory";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
 import React, { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
@@ -34,8 +35,18 @@ interface HeaderProps {
     actions?: ReactNode;
     /** Subheader content rendered below the title bar (SearchBar, SegmentedControl, etc.). */
     children?: ReactNode;
+    /**
+     * Gradient + texture surface. Automatically activates white text/icons.
+     * See `AppBarBackground` for the full shape.
+     */
+    background?: AppBarBackground;
+    /**
+     * [large variant] Extra top padding (px) above the large title.
+     * Use ~16 on root screens (no back button) for breathing room.
+     */
+    topSpacing?: number;
 }
-declare function Header({ variant, tone, actions, children }: HeaderProps): React.JSX.Element;
+declare function Header({ variant, tone, actions, children, background, topSpacing, }: HeaderProps): React.JSX.Element;
 declare function HeaderSearch({ searchQuery }: {
     searchQuery?: string;
 }): React.JSX.Element | null;

package/dist/views/ListViewV2.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/js
 import { Display } from "../Display";
 import SearchHistory from "../Display/Display.SearchHistory";
 import { ErrorBoundary, Feedback } from "../Feedback";
+import { useBottomInset } from "../layouts/BottomInset";
 import Container from "../layouts/Container";
 import { Navigation } from "../Navigation";
 import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { theme } from "../theme";
+import { useTheme } from "../theme";
 import { cn, tv } from "../theme/tw";
 import { Typography } from "../Typography";
 import { ListViewProvider, useListView } from "../views/ListViewV2.context";
@@ -14,17 +15,15 @@ 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, 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
         ? { 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, 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 = "large", tone, actions, children }) {
+function Header({ variant = "large", tone, actions, children, background, topSpacing, }) {
     const { name, description, onBack } = useListView();
-    return (_jsx(Navigation.AppBar, { actions: actions, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, variant: variant }));
+    return (_jsx(Navigation.AppBar, { actions: actions, background: background, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, topSpacing: topSpacing, variant: variant }));
 }
 function HeaderSearch({ searchQuery = "" }) {
     const { name, onSearch } = useListView();
@@ -40,7 +39,7 @@ function HeaderSearch({ searchQuery = "" }) {
         if (onSearch && debouncedQuery !== undefined) {
             onSearch(debouncedQuery);
         }
-    }, [debouncedQuery]);
+    }, [debouncedQuery, onSearch]);
     if (!onSearch) {
         return null;
     }
@@ -98,6 +97,8 @@ function FilterChips({ children }) {
 }
 function Content({ children, withMargin = true, }) {
     const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
+    const bottomInset = useBottomInset();
+    const theme = useTheme();
     const handleRefresh = useCallback(async () => {
         setShowRefreshing(true);
         if (onRefresh) {
@@ -113,19 +114,23 @@ function Content({ children, withMargin = true, }) {
                 flexGrow: 1,
                 justifyContent: "center",
                 alignItems: "center",
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
+                paddingBottom: bottomInset,
+            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
     }
     if (items.length === 0) {
         return (_jsx(ScrollView, { contentContainerStyle: {
                 flexGrow: 1,
                 justifyContent: "center",
                 alignItems: "center",
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), children: _jsx(Feedback.Empty, {}) }));
+                paddingBottom: bottomInset,
+            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Empty, {}) }));
     }
-    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentWithMargin: withMargin, children: children })] }));
+    return (_jsxs(View, { style: { flex: 1, backgroundColor: theme.bg.page }, 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, onLoadMore, loadingMore, } = useListView();
+    const bottomInset = useBottomInset();
+    const theme = useTheme();
     const rowItems = useMemo(() => toRowItems(items), [items]);
     const handleRefresh = useCallback(async () => {
         setShowRefreshing(true);
@@ -147,7 +152,8 @@ function ContentList({ children, contentWithMargin, }) {
             flex: 1,
             marginTop: 2,
             paddingHorizontal: contentWithMargin ? 4 : 0,
-        }, 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 }) }));
+            backgroundColor: theme.bg.page,
+        }, children: _jsx(FlatList, { contentContainerStyle: bottomInset ? { paddingBottom: bottomInset } : undefined, 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/CircleButton.d.ts

@@ -1,19 +1,3 @@
-import { IconType } from "../utils/icon";
-import React, { ComponentType } from "react";
-interface CircleButtonProps {
-    iconType?: IconType;
-    size?: "sm" | "md" | "lg";
-    color?: string;
-    variant?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
-    className?: string;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
-}
-/**
- * @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 {};
+/** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.CircleButton` instead. */
+export type { CircleButtonProps } from "../Display/Display.CircleButton";
+export { CircleButton } from "../Display/Display.CircleButton";

package/dist/widgets/CircleButton.js

@@ -1,41 +1 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { View } from "react-native";
-import { tv } from "tailwind-variants";
-const circleButtonVariants = tv({
-    base: "rounded-full items-center justify-center shadow-sm",
-    variants: {
-        size: {
-            sm: "w-12 h-12", // 48px
-            md: "w-15 h-15", // 60px
-            lg: "w-20 h-20", // 80px
-        },
-        variant: {
-            primary: "bg-primary",
-            secondary: "bg-secondary",
-            accent: "bg-accent",
-            success: "bg-success",
-            danger: "bg-danger",
-            warning: "bg-warning",
-        },
-    },
-    defaultVariants: {
-        size: "md",
-        variant: "accent",
-    },
-});
-const SIZE_MAP = {
-    sm: { container: 48, icon: 24 },
-    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 }) }));
-}
+export { CircleButton } from "../Display/Display.CircleButton";

package/dist/widgets/JSONViewer.js

@@ -1,7 +1,7 @@
 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 { useEffect, useMemo, useState } from "react";
 import { Text, View } from "react-native";
 const parseDeepJson = (value) => {
     if (typeof value === "string") {
@@ -116,19 +116,19 @@ const JsonPreview = ({ selectedJson }) => {
     }, [selectedJson]);
     // Guard 4: colorize with processing control
     const coloredLines = useMemo(() => {
-        setIsProcessing(true);
         try {
             return parseJsonToColoredLines(formattedJson);
         }
         catch (error) {
             console.warn("[JSONViewer] Error coloring JSON:", error);
-            // Fallback a texto plano si falla el coloreado
             return [{ text: formattedJson, color: "#333333" }];
         }
-        finally {
-            // Small delay so the loading state is visible if needed
-            setTimeout(() => setIsProcessing(false), 50);
-        }
+    }, [formattedJson]);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setIsProcessing(true);
+        const t = setTimeout(() => setIsProcessing(false), 50);
+        return () => clearTimeout(t);
     }, [formattedJson]);
     // Guard 5: show loading while processing large JSON
     if (isProcessing && formattedJson.length > 50_000) {

package/dist/widgets/MenuCard.d.ts

@@ -1,13 +1,3 @@
-import { IconType } from "../utils/icon";
-import { ComponentType } from "react";
-interface MenuCardProps {
-    title: string;
-    iconType?: IconType;
-    onPress?: () => void;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
-}
-export declare function MenuCard({ title, iconType, onPress, customIcon, }: MenuCardProps): import("react").JSX.Element;
-export {};
+/** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.MenuCard` instead. */
+export type { MenuCardProps } from "../Display/Display.MenuCard";
+export { MenuCard } from "../Display/Display.MenuCard";

package/dist/widgets/MenuCard.js

@@ -1,8 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/useTheme";
-import { Typography } from "../Typography";
-import { CircleButton } from "../widgets/CircleButton";
-import { TouchableOpacity, View } from "react-native";
-export function MenuCard({ title, iconType = "ionicons", onPress, customIcon, }) {
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "bg-bg-card rounded-2xl p-4 m-2 w-[45%] shadow-sm", onPress: onPress, style: theme.shadow["sm"], children: _jsxs(View, { className: "items-center justify-center", children: [_jsx(CircleButton, { customIcon: customIcon, iconType: iconType }), _jsx(Typography.Text, { className: "text-text-primary mt-3 text-center", variant: "label", children: title })] }) }));
-}
+export { MenuCard } from "../Display/Display.MenuCard";

package/dist/widgets/MenuGrid.d.ts

@@ -1,17 +1,5 @@
-import { IconType } from "../utils/icon";
-import React, { ComponentType } from "react";
-export interface MenuItem {
-    id: string;
-    title: string;
-    iconType?: IconType;
-    onPress?: () => void;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
-}
-interface MenuGridProps {
-    readonly items: MenuItem[];
-}
-export declare const MenuGrid: React.FC<MenuGridProps>;
-export {};
+/** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.MenuGrid` instead. */
+export type { MenuGridItem, MenuGridProps, } from "../Display/Display.MenuGrid";
+export { MenuGrid } from "../Display/Display.MenuGrid";
+/** @deprecated Renamed to `MenuGridItem`. */
+export type { MenuGridItem as MenuItem } from "../Display/Display.MenuGrid";

package/dist/widgets/MenuGrid.js

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

package/dist/widgets/MenuSection.d.ts

@@ -0,0 +1,3 @@
+/** @deprecated Import from `@sincpro/mobile-ui/Navigation` → `Navigation.MenuSection` instead. */
+export type { MenuSectionProps } from "../Navigation/Navigation.MenuSection";
+export { MenuSection } from "../Navigation/Navigation.MenuSection";

package/dist/widgets/MenuSection.js

@@ -0,0 +1 @@
+export { MenuSection } from "../Navigation/Navigation.MenuSection";

package/dist/widgets/PromoBanner.d.ts

@@ -0,0 +1,38 @@
+import { ComponentType } from "react";
+export interface PromoBannerItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    /** Left accent icon. */
+    icon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    /** Gradient color stops for the card surface. */
+    gradient?: readonly [string, string, ...string[]];
+    /** Accent color for the CTA button and badge. Defaults to `theme.accent`. */
+    accentColor?: string;
+    ctaLabel?: string;
+    onPress?: () => void;
+    /** Small badge text (e.g. "Nuevo", "Promo"). */
+    badge?: string;
+}
+export interface PromoBannerProps {
+    items: PromoBannerItem[];
+    /** Section heading above the banners row. */
+    title?: string;
+}
+/**
+ * Horizontal scrollable row of promotional/announcement cards.
+ * Each card supports gradient surfaces, icon, badge, title, subtitle, and a CTA button.
+ *
+ * Usage:
+ *   <PromoBanner
+ *     title="Destacados"
+ *     items={[
+ *       { id: "1", title: "Nueva ruta", subtitle: "Servicio express", badge: "Nuevo",
+ *         gradient: ["#0D2B1F", "#00C357"], ctaLabel: "Ver más", onPress: ... },
+ *     ]}
+ *   />
+ */
+export declare function PromoBanner({ items, title }: PromoBannerProps): import("react").JSX.Element;

package/dist/widgets/PromoBanner.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import GradientSurface from "../Display/Display.GradientSurface";
+import { useTheme } from "../theme";
+import { Typography } from "../Typography";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+function BannerCard({ item }) {
+    const theme = useTheme();
+    const accent = item.accentColor ?? theme.accent;
+    const hasGradient = !!item.gradient;
+    const Icon = item.icon;
+    const textColor = hasGradient ? "#FFFFFF" : theme.text.primary;
+    const subtextColor = hasGradient ? "rgba(255,255,255,0.75)" : theme.text.secondary;
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.85, onPress: item.onPress, style: {
+            width: 280,
+            borderRadius: 16,
+            overflow: "hidden",
+            marginRight: 12,
+            backgroundColor: hasGradient ? "transparent" : theme.bg.card,
+            borderWidth: hasGradient ? 0 : 1,
+            borderColor: theme.border.default,
+            ...theme.shadow.md,
+        }, children: [hasGradient ? (_jsx(GradientSurface, { colors: item.gradient, padding: "none", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } })) : null, _jsxs(View, { style: { padding: 16 }, children: [item.badge ? (_jsx(View, { style: {
+                            alignSelf: "flex-start",
+                            backgroundColor: accent,
+                            borderRadius: 999,
+                            paddingHorizontal: 10,
+                            paddingVertical: 3,
+                            marginBottom: 10,
+                        }, children: _jsx(Typography.Text, { semibold: true, style: { color: "#FFFFFF", fontSize: 11 }, variant: "caption", children: item.badge }) })) : null, _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [Icon ? (_jsx(View, { style: {
+                                    width: 48,
+                                    height: 48,
+                                    borderRadius: 12,
+                                    backgroundColor: hasGradient ? "rgba(255,255,255,0.15)" : theme.bg.muted,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }, children: _jsx(Icon, { color: hasGradient ? "#FFFFFF" : theme.icon.primary, size: 24 }) })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsx(Typography.Text, { semibold: true, style: { color: textColor }, variant: "subtitle", children: item.title }), item.subtitle ? (_jsx(Typography.Text, { style: { color: subtextColor, marginTop: 2 }, variant: "bodySmall", children: item.subtitle })) : null] })] }), item.ctaLabel ? (_jsx(View, { style: {
+                            marginTop: 14,
+                            alignSelf: "flex-start",
+                            backgroundColor: hasGradient ? "rgba(255,255,255,0.2)" : accent,
+                            borderRadius: 999,
+                            paddingHorizontal: 16,
+                            paddingVertical: 7,
+                        }, children: _jsx(Typography.Text, { semibold: true, style: { color: hasGradient ? "#FFFFFF" : theme.text.onAccent, fontSize: 13 }, variant: "bodySmall", children: item.ctaLabel }) })) : null] })] }));
+}
+/**
+ * Horizontal scrollable row of promotional/announcement cards.
+ * Each card supports gradient surfaces, icon, badge, title, subtitle, and a CTA button.
+ *
+ * Usage:
+ *   <PromoBanner
+ *     title="Destacados"
+ *     items={[
+ *       { id: "1", title: "Nueva ruta", subtitle: "Servicio express", badge: "Nuevo",
+ *         gradient: ["#0D2B1F", "#00C357"], ctaLabel: "Ver más", onPress: ... },
+ *     ]}
+ *   />
+ */
+export function PromoBanner({ items, title }) {
+    const theme = useTheme();
+    return (_jsxs(View, { children: [title ? (_jsx(Typography.Text, { semibold: true, style: { color: theme.text.secondary, marginBottom: 10, paddingHorizontal: 16 }, variant: "caption", children: title.toUpperCase() })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingVertical: 2 }, horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((item) => (_jsx(BannerCard, { item: item }, item.id))) })] }));
+}

package/dist/widgets/PromoModal.d.ts

@@ -0,0 +1,41 @@
+import { ComponentType } from "react";
+export interface PromoModalProps {
+    visible: boolean;
+    onDismiss: () => void;
+    title: string;
+    body?: string;
+    /** Optional icon rendered at the top of the card. */
+    icon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    /** Gradient for the icon header area (top strip). */
+    headerGradient?: readonly [string, string, ...string[]];
+    /** Primary CTA label. */
+    ctaLabel?: string;
+    onPressCta?: () => void;
+    /** Secondary link/dismiss label. Defaults to "Ahora no". */
+    dismissLabel?: string;
+    /** Badge chip text above the title (e.g. "Novedad", "Oferta"). */
+    badge?: string;
+    /** Accent color for the CTA button and badge. */
+    accentColor?: string;
+}
+/**
+ * Bottom-anchored modal for news, promotions, or announcements.
+ * Tapping outside (backdrop) also dismisses it.
+ *
+ * Usage:
+ *   <PromoModal
+ *     visible={showPromo}
+ *     onDismiss={() => setShowPromo(false)}
+ *     title="Nueva función disponible"
+ *     body="Ahora puedes filtrar rutas por color directamente desde el panel principal."
+ *     badge="Novedad"
+ *     headerGradient={["#022B14", "#065E2B"]}
+ *     icon={BellIcon}
+ *     ctaLabel="Explorar"
+ *     onPressCta={handleExplore}
+ *   />
+ */
+export declare function PromoModal({ visible, onDismiss, title, body, icon: Icon, headerGradient, ctaLabel, onPressCta, dismissLabel, badge, accentColor, }: PromoModalProps): import("react").JSX.Element;