@sincpro/mobile-ui 0.4.1 → 0.6.0

package/dist/views/ListViewV2.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 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 { theme } from "../theme";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
+import { useTheme } from "../theme";
 import { cn, tv } from "../theme/tw";
 import { Typography } from "../Typography";
 import { ListViewProvider, useListView } from "../views/ListViewV2.context";
@@ -12,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({ children, }) {
+function Header({ variant = "large", tone, actions, children, background, topSpacing, }) {
     const { name, description, onBack } = useListView();
-    return (_jsx(Navigation.AppBar, { onBack: onBack, safeArea: false, subheader: children, subtitle: description ? description : `Seleccionar ${name}`, title: name }));
+    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();
@@ -38,14 +39,32 @@ function HeaderSearch({ searchQuery = "" }) {
         if (onSearch && debouncedQuery !== undefined) {
             onSearch(debouncedQuery);
         }
-    }, [debouncedQuery]);
+    }, [debouncedQuery, onSearch]);
     if (!onSearch) {
         return null;
     }
     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 }));
+    return (_jsx(View, { className: "flex-row px-4 my-2 items-center justify-between flex-1 gap-2", children: children }));
+}
+/** Secondary action bar docked below the AppBar — use for Save/Cancel, filter chips, etc. */
+function HeaderActionsBar({ children }) {
+    return (_jsx(View, { className: "bg-bg-card px-4 pt-1 pb-3 border-b border-border-light flex-row gap-2 items-center", children: children }));
+}
+/**
+ * Tab-like segmented switch for the header subheader (e.g. "Activos" / "Archivados").
+ * Use as a child of `<ListViewV2.Header>` — it lands in the AppBar subheader slot.
+ */
+function HeaderSegmented(props) {
+    return _jsx(SegmentedControl, { ...props });
+}
+/**
+ * Recent-searches list. Render as a SIBLING of the Header (like Filters/ActionsBar) —
+ * typically while the search query is empty. Delegates to `Display.SearchHistory`.
+ */
+function HeaderSearchHistory(props) {
+    return _jsx(SearchHistory, { ...props });
 }
 function HeaderFilters({ children }) {
     return _jsx(View, { className: "px-4 py-2 items-center", children: children });
@@ -78,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) {
@@ -93,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);
@@ -127,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();
@@ -178,7 +204,10 @@ const FiltersWithSubComponents = Object.assign(HeaderFilters, {
 });
 const HeaderWithSubComponents = Object.assign(Header, {
     Search: HeaderSearch,
+    SearchHistory: HeaderSearchHistory,
+    Segmented: HeaderSegmented,
     Actions: HeaderActions,
+    ActionsBar: HeaderActionsBar,
     Filters: FiltersWithSubComponents,
 });
 const RowWithSubComponents = Object.assign(RowRoot, {
@@ -194,6 +223,24 @@ const ContentWithSubComponents = Object.assign(Content, {
     List: ContentList,
     Row: RowWithSubComponents,
 });
+/**
+ * Screen container for a collection (list / index / search results).
+ * Owns safe-area, the FlatList (pagination + pull-to-refresh), record count, and the
+ * loading/empty/error states.
+ *
+ * API map:
+ *   ListViewV2.Root          — provider + container; pass `items`, `onSearch`, `onLoadMore`, `onBack`…
+ *   ListViewV2.Header            — AppBar (variant: default | large | center · tone: default | dark | gradient)
+ *     .Header.Search             — debounced SearchBar in the subheader (wires `onSearch`)
+ *     .Header.SearchHistory      — recent-searches list (SIBLING; show while query is empty)
+ *     .Header.Segmented          — tab-like switch in the subheader (Activos / Archivados)
+ *     .Header.Filters(.Chips/.Chip) — horizontal filter pills (SIBLING below the header)
+ *     .Header.ActionsBar         — SIBLING bar below the header (bulk select, etc.)
+ *   ListViewV2.Content           — FlatList body; `children` is an optional custom row renderer
+ *     .Content.Row(.Avatar/.Content/.Title/.Subtitle/.Footer/.Actions/.ActionButton)
+ *   ListViewV2.Footer        — pinned footer (hidden when empty)
+ *   ListViewV2.FloatingButton — absolute FAB overlay
+ */
 export const ListViewV2 = {
     Root: ListViewRoot,
     Header: HeaderWithSubComponents,

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;

package/dist/widgets/PromoModal.js

@@ -0,0 +1,75 @@
+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 { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * 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 function PromoModal({ visible, onDismiss, title, body, icon: Icon, headerGradient, ctaLabel, onPressCta, dismissLabel = "Ahora no", badge, accentColor, }) {
+    const theme = useTheme();
+    const insets = useSafeAreaInsets();
+    const accent = accentColor ?? theme.accent;
+    return (_jsxs(Modal, { animationType: "fade", onRequestClose: onDismiss, statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
+                        flex: 1,
+                        backgroundColor: "rgba(0,0,0,0.55)",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        paddingHorizontal: 24,
+                        paddingVertical: insets.top + 16,
+                    } }) }), _jsx(View, { pointerEvents: "box-none", style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingHorizontal: 24,
+                }, children: _jsxs(View, { style: {
+                        backgroundColor: theme.bg.card,
+                        borderRadius: 28,
+                        borderWidth: 1,
+                        borderColor: theme.border.default,
+                        width: "100%",
+                        maxWidth: 400,
+                        overflow: "hidden",
+                    }, children: [headerGradient || Icon ? (_jsxs(View, { style: { height: 120, justifyContent: "center", alignItems: "center" }, children: [headerGradient ? (_jsx(GradientSurface, { colors: headerGradient, padding: "none", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } })) : null, Icon ? (_jsx(View, { style: {
+                                        width: 64,
+                                        height: 64,
+                                        borderRadius: 20,
+                                        backgroundColor: "rgba(255,255,255,0.18)",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                    }, children: _jsx(Icon, { color: "#FFFFFF", size: 32 }) })) : null] })) : null, _jsxs(View, { style: { paddingHorizontal: 24, paddingTop: 12, paddingBottom: 8 }, children: [badge ? (_jsx(View, { style: {
+                                        alignSelf: "flex-start",
+                                        backgroundColor: accent,
+                                        borderRadius: 999,
+                                        paddingHorizontal: 12,
+                                        paddingVertical: 4,
+                                        marginBottom: 12,
+                                    }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent, fontSize: 11 }, variant: "caption", children: badge }) })) : null, _jsx(Typography.Text, { semibold: true, style: { color: theme.text.primary }, variant: "h3", children: title }), body ? (_jsx(Typography.Text, { style: { color: theme.text.secondary, marginTop: 8, lineHeight: 22 }, variant: "body", children: body })) : null] }), _jsxs(View, { style: { paddingHorizontal: 24, paddingTop: 16, gap: 10 }, children: [ctaLabel ? (_jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: () => {
+                                        onPressCta?.();
+                                        onDismiss();
+                                    }, style: {
+                                        backgroundColor: accent,
+                                        borderRadius: 14,
+                                        paddingVertical: 15,
+                                        alignItems: "center",
+                                    }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent }, variant: "body", children: ctaLabel }) })) : null, _jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: onDismiss, style: { alignItems: "center", paddingVertical: 12 }, children: _jsx(Typography.Text, { style: { color: theme.text.secondary }, variant: "body", children: dismissLabel }) })] })] }) })] }));
+}

package/dist/widgets/QuickActions.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from "react";
+export interface QuickActionItem {
+    id: string;
+    label: string;
+    /** Ionicon name — use this OR `customIcon`. */
+    icon?: string;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    badge?: string | number;
+    onPress?: () => void;
+    /** Circle background color override. Defaults to `theme.bg.muted`. */
+    color?: string;
+}
+export interface QuickActionsProps {
+    items: QuickActionItem[];
+    /** Section heading rendered above the row. */
+    title?: string;
+}
+/**
+ * Horizontal scrollable row of small icon+label shortcuts ("Acciones Rápidas").
+ * Each item renders a 48 px icon circle + optional badge + label below.
+ * Scroll is horizontal and indicator-free for a clean look.
+ */
+export declare function QuickActions({ items, title }: QuickActionsProps): import("react").JSX.Element;

package/dist/widgets/QuickActions.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { useTheme } from "../theme";
+import { Typography } from "../Typography";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+/**
+ * Horizontal scrollable row of small icon+label shortcuts ("Acciones Rápidas").
+ * Each item renders a 48 px icon circle + optional badge + label below.
+ * Scroll is horizontal and indicator-free for a clean look.
+ */
+export function QuickActions({ 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: 12, gap: 4 }, horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((item) => (_jsxs(TouchableOpacity, { activeOpacity: 0.7, onPress: item.onPress, style: { alignItems: "center", width: 72, paddingVertical: 4 }, children: [_jsx(View, { style: {
+                                width: 52,
+                                height: 52,
+                                borderRadius: 999,
+                                backgroundColor: item.color ?? theme.bg.muted,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                borderWidth: 1,
+                                borderColor: theme.border.default,
+                            }, children: _jsx(Icon, { color: theme.text.primary, customIcon: item.customIcon, name: item.icon, size: 24, type: item.customIcon ? "custom" : "ionicons" }) }), item.badge != null ? (_jsx(View, { style: {
+                                position: "absolute",
+                                top: 2,
+                                right: 4,
+                                minWidth: 18,
+                                height: 18,
+                                borderRadius: 999,
+                                backgroundColor: theme.danger,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                paddingHorizontal: 4,
+                                borderWidth: 2,
+                                borderColor: theme.bg.card,
+                            }, children: _jsx(Typography.Text, { style: { color: "#FFFFFF", fontSize: 9, lineHeight: 11 }, children: item.badge }) })) : null, _jsx(Typography.Text, { numberOfLines: 2, style: {
+                                color: theme.text.primary,
+                                marginTop: 6,
+                                textAlign: "center",
+                                fontSize: 11,
+                            }, variant: "caption", children: item.label })] }, item.id))) })] }));
+}

package/dist/widgets/index.d.ts

@@ -2,6 +2,16 @@ export { CircleButton } from "../widgets/CircleButton";
 export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
 export { HomeHeader } from "../widgets/HomeHeader";
 export { MenuCard } from "../widgets/MenuCard";
-export type { MenuItem } from "../widgets/MenuGrid";
+export type { MenuGridItem, MenuGridProps } from "../widgets/MenuGrid";
+/** @deprecated Renamed to `MenuGridItem`. */
+export type { MenuGridItem as MenuItem } from "../widgets/MenuGrid";
 export { MenuGrid } from "../widgets/MenuGrid";
+export type { MenuSectionProps } from "../widgets/MenuSection";
+export { MenuSection } from "../widgets/MenuSection";
+export type { PromoBannerItem, PromoBannerProps, } from "../widgets/PromoBanner";
+export { PromoBanner } from "../widgets/PromoBanner";
+export type { PromoModalProps } from "../widgets/PromoModal";
+export { PromoModal } from "../widgets/PromoModal";
+export type { QuickActionItem, QuickActionsProps, } from "../widgets/QuickActions";
+export { QuickActions } from "../widgets/QuickActions";
 export { TimeZoneSelector } from "../widgets/TimeZoneSelector";